Пошук найближчого елемента без jQuery

Question 1

Я намагаюся знайти найближчий елемент з конкретним ім'ям тегу без jquery. Коли я натискаю на a, <th>я хочу отримати доступ до <tbody>для цієї таблиці. Пропозиції? Я читав про офсет, але насправді не надто його розумів. Чи слід просто використовувати:

Припустимо, для th вже встановлено клацаний елемент th

th.offsetParent.getElementsByTagName('tbody')[0]

Question 2

Мало (дуже) пізно на вечірку, але тим не менше. Це повинно зробити трюк :

function closest(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    })

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

Question 3

Дуже просто:

el.closest('tbody')

Підтримується у всіх браузерах, крім IE.
ОНОВЛЕННЯ : Edge тепер також підтримує це.

Не потрібно jQuery. Більш того , заміна JQuery це $(this).closest('tbody')з $(this.closest('tbody'))збільшить продуктивність, істотно , коли елемент не знайдений.

Polyfill для IE:

if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
    var el = this;
    while (el) {
        if (el.matches(selector)) {
            return el;
        }
        el = el.parentElement;
    }
};

Зверніть увагу, що не існує, returnколи елемент не був знайдений, фактично повертаючись, undefinedколи найближчий елемент не був знайдений.

Детальніше див .: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Question 4

Ось як ви отримуєте найближчий елемент за назвою тегу без jQuery:

function getClosest(el, tag) {
  // this is necessary since nodeName is always in upper case
  tag = tag.toUpperCase();
  do {
    if (el.nodeName === tag) {
      // tag name is found! let's return it. :)
      return el;
    }
  } while (el = el.parentNode);

  // not found :(
  return null;
}

getClosest(th, 'tbody');

Question 5

Для цього існує стандартизована функція: Element.closest . Більшість браузерів, крім IE11, підтримують це ( деталі caniuse.com ). Документи MDN також містять полізаповнення на випадок, якщо вам потрібно націлити на старіші браузери.

Щоб знайти найближчого tbodyбатька, якого thви отримали, ви можете зробити:

th.closest('tbody');

Якщо ви хочете написати функцію самостійно - ось що я придумав:

function findClosestParent (startElement, fn) {
  var parent = startElement.parentElement;
  if (!parent) return undefined;
  return fn(parent) ? parent : findClosestParent(parent, fn);
}

Щоб знайти найближчого батька за назвою тегу, ви можете використовувати його таким чином:

findClosestParent(x, element => return element.tagName === "SECTION");

Question 6

function closest(el, sel) {
    if (el != null)
        return el.matches(sel) ? el 
            : (el.querySelector(sel) 
                || closest(el.parentNode, sel));
}

Це рішення використовує деякі найновіші функції специфікації HTML 5, і для використання у старих / несумісних браузерах (читайте: Internet Explorer) знадобиться полізаповнення.

Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector 
    || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector 
    || Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);

Question 7

Щоб розширити відповідь @SalmanPK

це дозволить використовувати вузол як селектор, корисний при роботі з такими подіями, як наведення миші.

function closest(el, selector) {
    if (typeof selector === 'string') {
        matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
        while (el.parentElement) {
            if (el[matches](selector)) {
                return el
            };
            el = el.parentElement;
        }
    } else {
        while (el.parentElement) {
            if (el === selector) {
                return el
            };
            el = el.parentElement;
        }
    }

    return null;
}

Question 8

Ось проста функція, яку я використовую: -

function closest(el, selector) {
    var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');

    while (el.parentElement) {
        if (el[matches](selector)) return el;

        el = el.parentElement;
    }

    return null;
}

Question 9

Короткий зміст:

Для пошуку конкретного предка ми можемо використовувати:

Element.closest();

Ця функція приймає рядок селектора CSS як аргумент. потім він повертає найближчого предка поточного елемента (або самого елемента), який відповідає селектору CSS, переданому в аргументах. Якщо немає предка, він повернеться null.

Приклад:

const child = document.querySelector('.child');
// select the child

console.dir(child.closest('.parent').className);
// check if there is any ancestor called parent

<div class="parent">
  <div></div>
  <div>
    <div></div>
    <div class="child"></div>
  </div>
</div>

Розгорніть фрагмент

Question 10

Отримати найближчий елемент DOM по дереву, що містить клас, ідентифікатор, атрибут даних або тег. Включає сам елемент. Підтримується назад до IE6.

var getClosest = function (elem, selector) {

    var firstChar = selector.charAt(0);

    // Get closest match
    for ( ; elem && elem !== document; elem = elem.parentNode ) {

        // If selector is a class
        if ( firstChar === '.' ) {
            if ( elem.classList.contains( selector.substr(1) ) ) {
                return elem;
            }
        }

        // If selector is an ID
        if ( firstChar === '#' ) {
            if ( elem.id === selector.substr(1) ) {
                return elem;
            }
        } 

        // If selector is a data attribute
        if ( firstChar === '[' ) {
            if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
                return elem;
            }
        }

        // If selector is a tag
        if ( elem.tagName.toLowerCase() === selector ) {
            return elem;
        }

    }

    return false;

};

var elem = document.querySelector('#some-element');
var closest = getClosest(elem, '.some-class');
var closestLink = getClosest(elem, 'a');
var closestExcludingElement = getClosest(elem.parentNode, '.some-class');

Question 11

Знайдіть найближчі Elements childNodes.

closest:function(el, selector,userMatchFn) {
var matchesFn;

// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
    if (typeof document.body[fn] == 'function') {
        matchesFn = fn;
        return true;
    }
    return false;
});
function findInChilds(el){
    if(!el) return false;
    if(el && el[matchesFn] && el[matchesFn](selector)

    && userMatchFn(el) ) return [el];
    var resultAsArr=[];
    if(el.childNodes && el.childNodes.length){
        for(var i=0;i< el.childNodes.length;i++)
        {
             var child=el.childNodes[i];
             var resultForChild=findInChilds(child);
            if(resultForChild instanceof Array){
                for(var j=0;j<resultForChild.length;j++)
                {
                    resultAsArr.push(resultForChild[j]);
                }
            } 
        }

    }
    return resultAsArr.length?resultAsArr: false;
}

var parent;
if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;}
while (el) {
    parent = el.parentElement;
    result=findInChilds(parent);
    if (result)     return result;

    el = parent;
}

return null;

}

Question 12

Ось.

function findNearest(el, tag) {
    while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
        el = el.nextSibling;     
    } return el;
}

Лише братів і сестер знаходить далі по дереву. Використовуйте previousSibling, щоб піти іншим шляхом, або використовуйте змінні для обходу обох шляхів і повернення того, що знайдено першим. Ви отримуєте загальну ідею, але якщо ви хочете здійснити обхід батьківських вузлів або дітей, якщо брат чи сестра не збігаються, ви також можете використовувати jQuery. На той момент це легко того варте.

Question 13

Трохи пізно на вечірку, але, коли я проходив повз і просто відповів на дуже подібне питання, я опускаю сюди своє рішення - ми можемо сказати, що це closest()підхід JQuery , але в простому хорошому старому JavaScript.

Йому не потрібні будь-які pollyfills і це старіші браузери, і IE (:-)) дружній: https://stackoverflow.com/a/48726873/2816279

Question 14

Я думаю, що найпростіший код для лову за допомогою jquery найближчий:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

Велике спасибі.