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

Question

假设这个 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，它工作正常，所以我做错了选择器

Answer 1

li:first-child选择<li>作为其父元素的第一个子元素的元素。

你可以这样做：

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

Answer 2

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

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

这是一个工作小提琴：

http://jsfiddle.net/xzMmD/