使用jQuery选择第一个子元素

Question

我试图选择ul的第一个子元素，然后将其移除并添加到该ul的末尾，但不幸的是我无法选择第一个子元素。

以下是代码：

current = 0;
$(document).ready(function(){

    width=951;

    var totalSlides=$(".slider ul li").length;
    $(".slider ul").removeAttr('width');
    $(".slider ul").attr('width',width*totalSlides);

    $('#next img').click(function(){
        current -= width;
        $(".slider ul").animate({"left":current+"px"}, "slow");
        $(".slider ul").append($(".slider ul:first-child"));
        //$('.slider ul:firstChild').remove();
    });
});

- mysterious

---

OT：我猜没有人告诉过你可以链接jQuery函数调用。大多数函数返回原始选择器，因此您可以编写 $('.slider ul').animate(...).append(...);。 - zzzzBov

实际上，你应该阅读整个jquery api，因为在设置宽度之前不需要删除宽度，在任何情况下都应该使用width函数。 - zzzzBov

Answer 1

你不需要使用.remove()^帮助或.detach()^帮助将一个节点删除或分离出来再添加到其他地方。你可以通过直接调用.append()^帮助或.appendTo()^帮助，分别使用.after()^帮助和.insertAfter^帮助即可实现。例如:

$('ul li:first').insertAfter('ul li:last');

演示: http://www.jsfiddle.net/KFk4P/

- jAndy

---

这是一个微妙的呼救吗？ ;o) - user113716

Answer 2

可以选择 ul 的第一个子元素：

$('ul > :first-child');

或:

$('ul').children().eq(0);

或者：

$('ul li:first');

可能还有许多其他方法。

- David Thomas

Answer 3

任何一个都可以：

• $('ul > li:first')
• $('ul > li:first-child')
• $('ul > li:eq(0)')
• $('ul > li:nth-child(1)')
• $('ul > li').eq(0)
• $('ul > li').first()
• $('ul > li')[0]

注：以上选择器均可用于查找列表中的第一个元素。

- zzzzBov

Answer 4

首先，为每个第一个span创建一个类，如下所示：

<li><span class = "the_span">a1</span><span>b1</<span></li>
<li><span class = "the_span">a2</span><span>b2</<span></li>
<li><span class = "the_span">a3</span><span>b3</span></li>`

在JavaScript中，你要写：

var spanEl = document.getElementsByClassName("the_span");

就是这样！

- FlipFloop

Answer 5

ul:first-child 不会选择 ul 的第一个子元素，而是选择作为第一个子元素的 ul 元素本身。请使用 li:first-child。

- Sjoerd