如何只在jQuery中定位ul li：nth-​​child（2）

Question

我尝试仅将li:nth-child(2)宽度动画从230px设为780px。

我已经完成了此操作，但现在只要此部分中有li，它就会nth-child(3)宽度为780px。

我如何只影响我想要的一个元素的宽度？

JS：

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage ul > li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

我也试过这个：

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

HTML：

<div class="homepage">
  <ul>
    <li>content here</li>
    <li>
      <ul>
        <li>content here</li>
        <li>content here</li>
        <li>content here</li>
      </ul>
    </li>
    <li>content here</li>
  </ul>
</div>

提前感谢您提供的帮助：）

Answer 1

请改用此选择器：

.homepage > ul > li:nth-child(2)

这适用于您在上面发布的html，因为现在它仅适用于ul的{​​{1}}直接后代，因此不适用于您的子<div class="homepage">。< / p>