jQuery找到哪个父亲更近？

Question

在jQuery中,您可以调用closest以查找最接近的父级.

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

如果我跑$('a').closest('table').length或$('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>

Answer 1

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

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

例:

$(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>