:first-child 和其他选择器似乎不起作用

Posted 2023-05-09

【中文标题】:first-child 和其他选择器似乎不起作用

【英文标题】：:first-child and other selectors do not seem to work

【发布时间】：2013-07-24 16:27:00

【问题描述】：

假设这个 html

<ul class="slider">
    <li><img id="img1" src="img/slide-1.jpg"/></li>
    <li><img src="img/slide-2.jpg"/></li>
    <li><img src="img/slide-3.jpg"/></li>
</ul>

在我的 jquery 中，我有

$(document).ready(function()
    var max_count = $(".slider").children().length;
    for(var rn=1;rn<=max_count;rn++)
        
        var eg = $(".slider li:first-child").attr('id');
        $("#output").append(eg);
        
);

当我输入 #img1 而不是 .slider li:first-child 时，它工作正常，所以我在选择器上做错了

【问题讨论】：

想要的输出是什么

如果你只想要一个元素的 id 那么为什么要使用循环

【参考方案1】：

li:first-child 选择 <li> 元素，它们是其父元素的第一个子元素。

你可以这样做：

$(".slider li:first-child img").attr('id');

【参考方案2】：

这可以在不使用 for 循环的情况下完成，如下所示：

$(document).ready(function()
    $(".slider li").each(function()
         $("#output").append($(this).children("img:first-child").attr("id"));
    );
);

这是一个有效的小提琴：

http://jsfiddle.net/xzMmD/