Tìm phần tử gần nhất mà không có jQuery

Question 1

Tôi đang cố gắng tìm phần tử gần nhất với tên thẻ cụ thể mà không cần jquery. Khi tôi nhấp vào một, <th>tôi muốn truy cập vào <tbody>bảng đó. Gợi ý? Tôi đã đọc về bù đắp nhưng không thực sự hiểu nó quá nhiều. Tôi có nên sử dụng:

Giả sử th đã được đặt thành phần tử thứ được nhấp

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

Question 2

Tuy nhiên, rất ít (rất) muộn đến bữa tiệc. Điều này sẽ thực hiện thủ thuật :

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

Rất đơn giản:

el.closest('tbody')

Hỗ trợ trên tất cả các trình duyệt ngoại trừ IE.
CẬP NHẬT : Edge hiện cũng hỗ trợ nó.

Không cần jQuery. Hơn nữa, thay thế jQuery $(this).closest('tbody')bằng $(this.closest('tbody'))sẽ tăng hiệu suất, đáng kể khi phần tử không được tìm thấy.

Polyfill cho 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;
    }
};

Lưu ý rằng không có returnkhi không tìm thấy phần tử, trả về hiệu quả undefinedkhi không tìm thấy phần tử gần nhất.

Để biết thêm chi tiết, hãy xem: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Question 4

Đây là cách bạn lấy phần tử gần nhất theo tên thẻ mà không cần 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

Có một chức năng tiêu chuẩn hóa để thực hiện điều này: Element.closest . Hầu hết các trình duyệt ngoại trừ IE11 đều hỗ trợ nó ( chi tiết theo caniuse.com ). Tài liệu MDN cũng bao gồm polyfill trong trường hợp bạn phải nhắm mục tiêu các trình duyệt cũ hơn.

Để tìm tbodycha mẹ gần nhất thbạn có thể làm:

th.closest('tbody');

Trong trường hợp bạn muốn tự viết hàm - đây là những gì tôi đã nghĩ ra:

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

Để tìm cha mẹ gần nhất theo tên thẻ, bạn có thể sử dụng nó như sau:

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));
}

Giải pháp này sử dụng một số tính năng mới hơn của thông số kỹ thuật HTML 5 và sử dụng tính năng này trên các trình duyệt cũ hơn / không tương thích (đọc: Internet Explorer) sẽ yêu cầu polyfill.

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

Question 7

Để mở rộng câu trả lời @SalmanPK

nó sẽ cho phép sử dụng nút làm bộ chọn, hữu ích khi bạn làm việc với các sự kiện như di chuột qua.

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

Đây là chức năng đơn giản mà tôi đang sử dụng: -

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

Tóm lược:

Để tìm một tổ tiên cụ thể, chúng ta có thể sử dụng:

Element.closest();

Hàm này lấy một chuỗi bộ chọn CSS làm đối số. sau đó nó trả về tổ tiên gần nhất của phần tử hiện tại (hoặc chính phần tử đó) khớp với bộ chọn CSS đã được truyền trong các đối số. Nếu không có tổ tiên nó sẽ trở lại null.

Thí dụ:

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>

Mở rộng đoạn mã

Question 10

Lấy phần tử DOM gần nhất lên cây có chứa lớp, ID, thuộc tính dữ liệu hoặc thẻ. Bao gồm chính phần tử. Được hỗ trợ trở lại 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

Tìm các Mã con của Phần tử gần nhất.

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

Đây.

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

Chỉ tìm thấy anh chị em xa hơn dưới gốc cây. Sử dụng beforeSibling để đi theo hướng khác Hoặc sử dụng các biến để đi theo cả hai cách và trả về tùy theo điều kiện nào được tìm thấy trước. Bạn có ý tưởng chung, nhưng nếu bạn muốn duyệt qua các Mã cha hoặc con nếu anh chị em không khớp, bạn cũng có thể sử dụng jQuery. Tại thời điểm đó, nó dễ dàng đáng giá.

Question 13

Đến bữa tiệc hơi muộn, nhưng khi tôi đi ngang qua và chỉ trả lời lại một câu hỏi tương tự, tôi đưa ra giải pháp của mình ở đây - chúng ta có thể nói đó là closest()cách tiếp cận JQuery , nhưng bằng JavaScript tốt.

Nó không cần bất kỳ pollyfills nào và đó là các trình duyệt cũ hơn và thân thiện với IE (:-)): https://stackoverflow.com/a/48726873/2816279

Question 14

Tôi nghĩ Mã dễ bắt nhất với jquery gần nhất:

<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>';
}
?>

Cảm ơn nhiều.