logo标签列表

jQuery查找哪个父元素更接近？

javascriptjqueryhtml
4
在jQuery中，可以调用 closest 方法来查找最近的父元素。
如果我有一个位于 table 元素内的 td 元素、ul 元素、li 元素和 a 元素，我想知道 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>
1
我认为你应该发布一段你所指的HTML片段。这将使每个人更清楚。 - bob.mazzo
1
  1. 正如Bob所提到的，HTML用于确定DOM中元素/节点的位置和关系。
  2. 所有元素（除了根元素<html>）只有一个父级。一个元素怎么可能有多个父级呢？你指的是祖先。
 - zer00ne
@zer00ne：这是jQuery的错：获取所有祖先元素的函数被称为.parents()。 - Amadan
@Amadan 我猜 .ancestors() 太啰嗦了。 - zer00ne
5个回答
6
您可以将多个元素选择器列出到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>

2
然后，您还需要$(elem).get(0).tagName来了解您实际找到了什么。 - MrD
3

使用 .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"))

点击此处查看高级用例示例

（相关于IT技术）
我实际上尝试使用.index()，但它对我没有起作用。如果您能制作一个有效的片段，我会很感兴趣。 - Amadan
我的解决方案的好处是，您可以传递多个jQuery对象而不是多个选择器字符串。选择器字符串必须硬编码或使用其他方法生成，而jQuery对象可以通过编程轻松获取。 - 4castle
2
我喜欢Fabian的回答; 但是为了实际测量距离，您可以使用以下方法: 

var $parentsUntilTable = $('li').parentsUntil('table');
var $parentsUntilUl = $('li').parentsUntil('ul');
console.log($parentsUntilTable.length < $parentsUntilUl.length
           ? 'table is closer'
           : 'ul is closer');
<!-- 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>

1
这是一个简单的实现 .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;
};

在jsFiddle上查看演示链接。

-1

一个元素只有一个父节点，它的上方是祖先节点。

从这里开始: https://dev59.com/ZWUp5IYBdhLWcg3woorS#15149590 - 你可以使用

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

由于这两个节点都是您正在考虑的元素的祖先，距离 DOM 树根最远的那个节点最接近您的元素。

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

3
这个指标测量的是布局距离，而不是树距离——两者完全不同的概念。 - Amadan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接