Question

如何获取多个元素的第N个父元素？

现在我这样做：

var winners = THUMBNAILS.find(".tournament-winner:contains(" + filter + ")");
var filteredThumbnails = winners.parent().parent().parent().parent().clone();

这确实有效。

但是当我尝试这样做时：

var filteredThumbnails = winners.parents().eq(3).clone();

仅获取winners变量中一个元素的缩略图（曾祖父）。

有没有更简单的方法来获取多个元素的第N个父级？

Answer 1

您可以使用.add()

使用添加到匹配元素集中的元素创建一个新的jQuery对象。

#imageLiteral(resourceName: "no_prof_image")

Answer 2

在获奖者数组中编写一个.map()或.forEach()函数。例如：

filteredThumbnails =  winners.map(winner => winner.parent().parent().parent().parent().clone());

Answer 3

您还可以在父母的返回值上使用filter。

$.parents返回一个数组。

假设您有以下HTML，并且希望获取ID为parentN的div。是第三亲之后，您可以将元素转换为数组。另外，您可以创建一个像这样的函数并在不同的地方使用它。

然后，您必须获取parents的所有第四个元素

function getNthParents(obj, N) { 
    return obj.parents().filter(index => !((index + 1) % N)).toArray();
}
nthParents = getNthParents($('.thumbnail'), 3)
console.log(nthParents)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent1'>
  <div>
    <div>
        <div class='thumbnail'>
           
        </div>
    </div>
  </div>
</div>

<div id='parent2'>
  <div>
    <div>
       <div class='thumbnail'>
           
       </div>
    </div>
  </div>
</div>

<div id='parent3'>
  <div>
    <div>
       <div class='thumbnail'>
           
       </div>
    </div>
  </div>
</div>

Answer 4

如果您共享html，会容易得多。

由于我不确定您要达到的目标...但是

另一种获取要定位元素的多个父级的方法， 没有唯一名称的情况如下所示。它将遍历直到找到一个以“ parent”开头的ID的父级。

winners.parents("[id^=parent]")

尽管我会给他们一个通用的CSS类，而不是这个类。

获取多个元素的第N个父元素

4 个答案: