Question

我有一堆在父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>

因此，考虑上面的示例，如何让班级.child1内的所有孩子（.child49到parent1）？

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

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

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

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

Answer 1

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

将选择以span类下的课程child开头的所有.parent1。

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

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

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

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

开头

Answer 2

这些代码获取div.parent1和div.parent2

中的所有子代码

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

Thess代码获取父母1的孩子

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

Answer 3

使用.children和.filter，如果孩子的数量不确定，则将您想要操纵parent1的所有孩子标记为child1

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

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

jquery children

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

3 个答案: