【问题标题】:How to get child element by index in Jquery?如何在 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)

【问题讨论】:

    标签: javascript jquery jquery-ui jquery-selectors


    【解决方案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 之间会有元素”
        猜你喜欢
        • 1970-01-01
        • 2011-03-07
        • 2012-04-10
        • 2015-04-05
        • 1970-01-01
        • 2013-12-03
        • 2018-12-02
        • 1970-01-01
        • 2012-03-03
        相关资源
        最近更新 更多