Question

在jQuery中，您可以调用closest来查找最近的父级。

如果a中的li中的ul中的td中有table ul。我想知道table父母是否比$('a').closest('table').length父母更近。显然，在这种情况下答案是显而易见的。

如果我运行$('a').closest('ul').length或$('a').closer('ul', 'table')，则返回1.

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

从技术上讲，如果有一种方法而不是在这种情况下ul会返回<table>  <tr> <td> <ul>  <li> <a href="#">A button</a> </li> </ul> </td> </tr> </table>，因为它在DOM中更接近。

The attribute 'type' may not appear in tag 'style amp-custom'.

Answer 1

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

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

示例：

＆＃13;
＆＃13;
$(document).on("click", function( event ) { $(event.target).closest("li, b").toggleClass("hilight"); });
＆＃13;
.hilight{ background: rgba(255, 0, 0, 0.5); }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用 .parents()。 返回从最近到最远订购的所有父母的列表。

使用它和使用.closest(selector)之间的区别在于它接受jQuery对象而不是选择器字符串，它必须是硬编码的。同时jQuery对象可以是集合，因此可以即时生成。

(function($) {
  $.fn.getClosest = function(testElements) {
    var element = $(this);
    var parents = element.parents();
    var indexClosest = Number.MAX_VALUE;
    testElements.each(function() {
      var index = parents.index($(this));
      if (index > -1 && index < indexClosest)
        indexClosest = index;
    });
    return parents.eq(indexClosest);
  };
})(jQuery);

使用这样的功能：

$("a").getClosest($("table, ul"))

Fiddle with advanced use case

Answer 3

我喜欢法比安的回答;但要实际测量距离，可以使用：

＆＃13;

var $parentsUntilTable = $('li').parentsUntil('table');
var $parentsUntilUl = $('li').parentsUntil('ul');
console.log($parentsUntilTable.length < $parentsUntilUl.length
           ? 'table is closer'
           : 'ul is closer');

＆＃13;

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <ul>
        <li>
        </li>
      </ul>
    </td>
  </tr>
</table>

＆＃13;

Answer 4

这是.closer()方法的一个简单实现，它返回最接近给定元素的选择器：

$.fn.closer = function(varargs) {
  var $elem = $(this);
  while ($elem.length) {
    for (var i = 0, len = arguments.length; i < len; i++) {
      if ($elem.is(arguments[i])) {
        return arguments[i];
      }
    }
    $elem = $elem.parent();
  }
  return null;
};

在行动on jsFiddle中查看。

Answer 5

一个元素只有一个父节点，其上面是祖先节点。

从这里开始：https://stackoverflow.com/a/15149590/1876047 - 您可以使用

$(elem1).offset().top - $(elem2).offset.().top

由于两个节点都是您正在考虑的元素的祖先，因此离DOM树根最远的那个节点就是元素的壁橱。

因此，如果上述差值大于0，则elem2最接近，否则elem1最接近。

jQuery找到哪个父亲更近？

5 个答案: