jQuery :第一个孩子没有像预期的那样工作
jQuery :第一个孩子没有像预期的那样工作
提问于 2012-05-25 00:47:39
我有一个表单，看起来像这样：
jsFiddle
<ul id="services">
<li class="service"><label><input type="checkbox">A single option</label>
</li>
<li class="service"><label><input type="checkbox">Another single option</label>
<ul>
<li>
<select>
</select>
additional options</li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
A multiple option</label>
<ul>
<li><label><input type="checkbox"> with another option </label>
<select>
</select>
</li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
Another multiple option</label>
<ul>
<li><label><input type="checkbox"> with another option </label>
<select>
</select>
</li>
<li>
<select>
</select>
additional options</li>
</ul>
</li>和我正在尝试使用以下命令来选择具有“<label>”类的<li>s的第一级中的s：
$(".service label:first-child").css("background", "yellow");但是它似乎是递归的，并且选择嵌套的<ul>s的第一个子对象。
我在这里做错了什么？如何仅选择具有“<label>”类的<li>的第一级中的服务？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-25 00:51:26
$(".service > label").css("background", "yellow");>是直接子选择器。
所以a > b选择器意味着，只有当b的直接父级是a时，才选择它。
8.2。子组合符
子组合符描述了两个元素之间的童年关系。子组合符由“大于号”(U+003E，>)字符组成，并分隔两个简单选择器序列。
:first-child选择器意味着，选择作为其父级的第一个子级的元素。
6.6.5.6。：第一子伪类
子级相同:第n个子节点(1)。: first -child伪类表示某个元素是其他元素的第一个子元素。
Stack Overflow用户
发布于 2012-05-25 00:52:51
您需要明确表示您需要来自父级的子级，而不是所有的子级
$(".service > label").css("background", "yellow");Live Example
Stack Overflow用户
发布于 2012-05-25 00:48:50
$("#services>li>label").css("background", "yellow");
要只获取直接的子对象，您可以使用>。
您可以在此处获得有关选择器的更多信息：http://www.w3schools.com/cssref/css_selectors.asp
我认为你的jsfiddle有一些问题，但是如果你只想要第一级的li，那就是你需要做的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10741850
复制相关文章
相似问题
腾讯云开发者
