如何在Jquery中按索引获取子元素？

Question

<div class="second">
    <div class="selector" id="selFirst"></div>
    <div class="selector" id="selSecond"></div>
    <div></div>
</div>

如何使用元素索引而不是ID获取#selFirst？

这个问题可以通过以下方法解决：

var $selFirst = $(".second:nth-child(1)");
console.log($selFirst);

返回的是：

jQuery(div.second)

- Davor Zubak

Answer 1

如果您知道您感兴趣的子元素是第一个：

 $('.second').children().first();

或按索引查找：

 var index = 0
 $('.second').children().eq(index);

- Rich O'Kelly

---

注意：eq() 是0索引，而index()是1索引。 - aphid

问题更加通用。如何按索引选择。而不是选择第一个子元素。 - Alexander Volkov

@AlexanderVolkov 注意第二个例子，它使用了索引。 - Rich O'Kelly

Answer 2

选择第一个子元素的方式如下：

1) $('.second div:first-child')

2) $('.second *:first-child')

3) $('div:first-child', '.second')

4) $('*:first-child', '.second')

5) $('.second div:nth-child(1)')

6) $('.second').children().first()

7) $('.second').children().eq(0)

注：以上为选择器的示例，可以用于在使用jQuery等JS库时选择网页中的元素。

- Deepak Kumar

---

提供的选项越多，获得的赞数就越多！ - Sarsaparilla

问题更为普遍。如何按索引选择。这不是关于如何选择第一个子元素的问题。 - Alexander Volkov

Answer 3

您可以通过索引选择器获取第一个元素：

$('div.second div:eq(0)')

Code: http://jsfiddle.net/RX46D/

- Samich

---

索引选择器不好。改用方法，它们更快。 - Raynos

Answer 4

$('.second').find('div:first')

- mbx-mbx

Answer 5

“nth-child”方法返回的是子元素而不是兄弟元素，你可能需要使用“nth-of-type”方法来选择特定类型的子元素。

var $selFirst = $(".second:nth-child(1)");

将返回具有类'.second'的第一个元素。

var $selFirst = $(".selector:nth-child(1)");

应该返回类为'.selector'的第一个兄弟元素。

- unaesthetic

Answer 6

var node = document.getElementsByClassName("second")[0].firstElementChild

免责声明：getElementsByClassName和firstElementChild在浏览器兼容性方面不太稳定，但DOM-shim可以解决这些问题。

- Raynos

---

请注意，如果OP正在寻找第一个DIV，则如果.second和#selFirst之间有任何HTML元素，则此方法将无法正常工作。 - mbx-mbx

他在哪里说“第一个DIV”？他在哪里说“在 .second 和 #selFirst 之间会有元素”？ - Raynos