javascript/jquery 选择父元素内的所有子元素答案

【问题标题】：javascript/jquery select all child elements inside a parent elementjavascript/jquery 选择父元素内的所有子元素
【发布时间】：2011-08-06 16:33:03
【问题描述】：

我有一堆在父 div 中唯一标识的子元素。我想知道jQuery（或javascript）中是否有办法捕获所有这些？父 div 中的子元素数量是任意的，这意味着它可以是每个 div 的任意数量。例如：

<div class="parent1">
   <span class="child1">some text here</span>
   <span class="child2">some other text</span>
   ...
   <span class="child49">yet more text</span>
   <span class="something_else">other text i don't want to select</span>
</div>
<div class="parent2">
   <span class="child1">some text</span>
   <span class="child2">some text</span>
   ...
   <span class="child120">some text</span>
</div>

那么考虑到上面的例子，我如何在班级parent1 中获得所有孩子（.child1 到.child49）？

我知道在 jQuery 中执行以下操作（使用多个选择器）：

$(".child1, .child2, ..., .child49").css("background","red");

但是有更好的方法吗？我不会总是知道每个父母有多少个孩子。

编辑：另外，我可能在父母中有其他孩子，但我不想选择不同的班级名称；我特别想选择所有“child*”类。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$('.parent1 span[class^="child"]')

将选择.parent1下类child开头的所有spans。

如果您想要所有span.childX 下的所有parentX，请使用：

$('div[class^="parent"] span[class^="child"]')

这是使用 jQuery 已经实现（并在某些情况下扩展）的CSS3 attribute selector。来自文档：

E[foo^="bar"] 一个 E 元素，其 "foo" 属性值正好以字符串 "bar" 开头

【讨论】：

这只会选择 SPAN，有没有办法选择所有子元素？
@GregL 是的，这回答了 child 指的是类而不是元素关系的问题。您的问题不同，应单独提出。也就是说，如果您只希望 all 特定元素下的子元素，则可以使用 CSS 通用选择器 * 和子组合器 > 例如 $('div > *') 将选择 @987654338 的所有直接子元素@

【解决方案2】：

这些代码获取 div.parent1 和 div.parent2 中的所有子项

$('[class^="parent"] span').css({ });
$('[class^="parent"]').children().css({ });

Thess 代码仅获取父级 1 的子级

$('.parent1 span').css...
$('.parent1').children().css...

【讨论】：

谢谢，如果我不想选择父 div 中的其他跨度，该怎么办？例如未标记为“child”但具有不同类（如“something_else”）的跨度，我不希望它选择该跨度。
我不知道我是否理解你，但试试这个：$('.parent1 span:not(.something_else)')... 我想。

【解决方案3】：

将.children 与.filter 一起使用，如果孩子的数量不确定，则将要操作的所有孩子标记为 parent1 为 child1

 $(".parent1").children().filter(".child1").css({color:'Red'});

这是小提琴http://jsfiddle.net/8hUqV/1/

jquery children

【讨论】：