Question

我有一个jQuery函数，需要获取元素父级的位置。

它看起来像：

   function show(e) {
        //debugger;
           var nextTableSelector = $(e).parent().parent().parent().parent().parent().parent().parent().parent();
  }

是否有一个简短的方法来遍历DOM结构？

有些事情：

$(e).parent()[5];

有什么建议吗？

请注意，此DOM结构是由第三方JS框架生成的，我无法在此结构中附加任何其他ID或类。我不得不以这种方式通过DOM工作。

Answer 1

因此，您需要的是.closest()或.parents()，如下所示。

var target = $('#source').closest('#target');
var target = $('#source').parents('#target');
alert ( target[0].id );

上述示例HTML：

<div id="target">
    Man!
    <div>
        <div>
            <div id="source"></div>
        </div>
    </div>
</div>

我建议.closest() .parents()将DOM树传递到文档的根元素，将每个祖先元素添加到临时集合中;然后，如果提供了一个选择器，它会根据选择器过滤该集合，而.closest()仅向 DOM树向上移动，直到找到所提供选择器的匹配为止。

修改

至于你的情况，你可能想要这样做：

var n = 5; //say you want the 5th parent var parent5th = $("#source").parents().eq(n-1); alert (parent5th[0].id); //So, your code becomes: var n = 8; //You want the 8th parent $(e).parents().eq(n-1);

如果您愿意，这是一个不那么丑陋的功能：

$.fn.nthParent = function(level) { level = level || 1; if (level <= 0) return; return level === 1 && $(this).parent() || $(this).parents().eq(level-1); }

用法：

//Apply some CSS to level 1 (immediate) parent $("#source").nthParent().css({ border: "1px solid red" }); OR $(".source").each(function(i) { $(this).nthParent(i+1).css({ border: "4px solid blue" }); });

A Demo以上内容。

Answer 2

如果您无法识别您想要的元素，但您知道它是第五个父母，那么您可以像您建议的那样$(e).parents().eq(5)或$(e).parents()[5]。

Answer 3

您可以使用.closest()代替parent().parent()，然后您将转到最接近的元素，而不管DOM结构中的距离是多少。

Answer 4

正如我在另一个答案的评论中提到的，如果您想要定位具有选择器的特定父级，您将需要使用.closest。

然而，我认为你正在追求让X父母在树上的东西，最好的方法是使用我认为的函数：

function getXParent(el, x) { // el = jQuery element, x = number of generations
  var curEl = el;
  for (var i = 1; i <= x; i++) {
    curEl = curEl.parent();
  }
  return curEl;
}
var newEl = getXParent($('#t5'), 3);
alert(newEl[0].id);

alert($('#t5').parents()[2].id); // Courtesy of Narayon

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="t1">
  <div id="t2">
    <div id="t3">
      <div id="t4">
        <div id="t5">

        </div>
      </div>
    </div>
  </div>
</div>

编辑：Narayon有一个比较简单的替代方案。

Answer 5

我知道这个答案很晚，但是还有另一种方法可以避免必须编写.parent（）5次：

eval("$(e)" + Array(5).join(".parent()"))

也可以解决问题。

.parent（）。parent（）。parent（）的简写

5 个答案: