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

【问题标题】：:first-child and other selectors do not seem to work:first-child 和其他选择器似乎不起作用
【发布时间】：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 那么为什么要使用循环

标签： jquery jquery-selectors attributes css-selectors

【解决方案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/

【讨论】：