jQuery儿童方法选择孙辈

我在jQuery上的net.tuts教程之后。我有问题与jQuery儿童选择方法。我对以下功能的理解可以改变儿童的颜色，但它不止一级地将所有列表元素的颜色改变为红色。我做错了什么？我已经看到相同的脚本在视频教程中工作得很好。下面是代码jQuery儿童方法选择孙辈

<ul class="color_change"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li> 
     <ul> 
      <li>sub item</li> 
      <li>sub item</li> 
     </ul> 
    </li> 
</ul> 

<script> 
    $('ul.color_change').children('li').css('color','red'); 
</script>`

来源

2013-07-13 user1986244

这是因为CSS颜色从其父继承 –

烤是绝对正确的。把一个CSS颜色你的李（其他然后红色）检查这个小提琴.. [http://jsfiddle.net/Z9BC6/] 不要糊涂！ –

你的小提琴不起作用，但是我指出了我从教程中遗漏的东西，那就是设置底色。 – user1986244

你可以使用：

DEMO

$('ul.color_change').children('li').not(':has(ul)').css('color','red');

的其他方式将设置红色为所有第一级子：

DEMO 2

$('ul.color_change').find('ul').css('color','black').end().children('li').css('color','red');

但更好的是只使用CSS规则：

DEMO 3

ul.color_change > li{color:red} 
ul.color_change > li > ul{color:black}

来源

2013-07-13 06:19:34

+1真棒:) –

我给你一点时间和解释不同的方法。最后，我再次看了教程，并且你说得对“从父母继承的css颜色”。我忘了教程中的一点，即添加基本颜色li {color：black};它会解决这个问题。谢谢 – user1986244

jQuery儿童方法选择孙辈

回答

相关问题