jquery - 如何获取当前元素的子 n？

Question

我有一个类似于以下结构的页面：

<div id="row_2">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

假设我不能使用该 id，我如何获得 row_2 的第 n 个孩子（例如，我在 row_1 上并且我正在移动到下一个）

我尝试了以下方法：

current.parent().next().children().filter(":nth-child("+i+")");

其中“current”是前一个“row div”上的一个项目，“i”是一个项目的索引，但这不起作用。我也尝试使用 0 代替“i”来测试它，但这也不起作用 - 错误在哪里？

Answer 1

假设我正确理解了您的问题，您正在寻找eq，而不是nth-child：

current.parent().next().children().eq(i);

正如文档所述eq：

将匹配元素集减少到指定索引处的元素。

Answer 2

我不完全确定你在做什么，但我建议：

current.parent().next().find(":nth-child("+i+")");

或者：

current.parent().next().children().eq(i);

如果您需要使用filter()，我建议（尽管不知道到底发生了什么）也许可以尝试：

current.parent().next().children().filter(
    function(){
        return $(this).is(":nth-child("+i+")");
    });

但我看不到优势，除非您也想过滤其他标准。

参考：

• eq().
• filter().
• find().

Answer 3

如果您的起点是row_1，那么：

var row2child3 = row1.next().children().eq(2); // zero-based index, 2 = third child

实例| 资源

假设row_1和row_2是紧邻的，例如：

<div id="row_1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div id="row_2">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如果没有，您可能想要.nextAll("some selector here").first()而不是.next().

如果您的起点是 中的项目之一row_1，则：

..parent()在那里插入一个：

var row2child3 = item.parent().next().children().eq(2); // zero-based index, 2 = third child

实例| 资源