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

Posted 2023-03-05

【中文标题】如何在 Jquery 中通过索引获取子元素？

【英文标题】：How to get child element by index in Jquery?

【发布时间】：2012-02-14 03:34:26

【问题描述】：

<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)

【参考方案1】：

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

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

或按索引查找：

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

【讨论】：

注意：eq() 是 0-indexed，但 index() 是 1-indexed。

这个问题比较笼统。如何按索引选择。这不是关于如何选择第一个孩子。

@AlexanderVolkov 注意第二个例子，它使用了索引

【参考方案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)

【讨论】：

您提供的选择越多，获得的点赞就越多！

这个问题比较笼统。如何按索引选择。这不是关于如何选择第一个孩子。

【参考方案3】：

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

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

代码：http://jsfiddle.net/RX46D/

【讨论】：

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

【参考方案4】：

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

【参考方案5】：

nth-child 不是返回兄弟姐妹而不是孩子吗？

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

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

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

应该给你类'.selector'的第一个兄弟

【参考方案6】：

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

免责声明：getElementsByClassName 和 firstElementChild 的浏览器合规性不稳定。 DOM-shims 解决了这些问题。

【讨论】：

请记住，如果 OP 正在寻找第一个 DIV，如果 .second 和 #selFirst 之间有任何 html 元素，这将不起作用。

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