jQuery 找到哪个父级更接近？

在 jQuery 中你可以调用closest寻找最近的父母。

如果我有一个a in a li in a ul in a td in a table。我想知道是否ul父母比父母更亲近table父母。显然，在这种情况下，答案是显而易见的。

如果我跑$('a').closest('table').length or $('a').closest('ul').length两者都返回 1。

我想找出 DOM 中哪个父级更接近。

从技术上讲，如果有一种方法比在这种情况下$('a').closer('ul', 'table')将返回ul因为它在 DOM 中更接近。

<table> <!-- Is this closer -->
    <tr>
        <td>
            <ul> <!-- Or is this closer -->
                <li>
                    <a href="#">A button</a>
                </li>
            </ul>
        </td>
    </tr>
</table>

您可以列出多个元素选择器closest函数，它只会找到其中最接近的一个：

$('a').closest('table, ul')

Example:

$(document).on("click", function( event ) {
  $(event.target).closest("li, b").toggleClass("hilight");
});

.hilight{
  background: rgba(255, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><b>Click me!</b></li>
  <li>You can also click this line <b>or click me!</b></li>
</ul>