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

javascript/jquery select all child elements inside a parent element

提问by James Nine

I have a bunch of child elements that are uniquely identified within a parent div. I want to know if there's a way in jQuery (or javascript) to capture all of them? The number of children in the parent div is arbitrary, meaning it could be any number for each div. For example:

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

So considering the above example, how do I get ALL the children (.child1through .child49) within the class parent1?

所以考虑到上面的例子，我如何让班里的所有孩子（.child1通过.child49）parent1？

I know that doing the following will work in jQuery (using multiple selector):

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

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

But is there a better way? I won't always know how many children are in each parent.

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

EDIT: also, I might have other children in the parent with a different class name that I DO NOT want to select; I specifically want to select all the "child*" classes.

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

回答by andyb

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

will select all the spans that start with the class childunder the class .parent1.

将选择spanclasschild下所有以 class开头的s .parent1。

If you want all the span.childXunder all parentXthen use:

如果你想要所有的span.childX全部parentX然后使用：

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

This is using a CSS3 attribute selectorwhich jQuery have implemented (and extended in some cases). From the documentation:

这是使用CSS3 attribute selectorjQuery 实现的（并在某些情况下扩展）。从文档：

E[foo^="bar"]an E element whose "foo"attribute value begins exactly with the string "bar"

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

回答by Jose Adrian

These codes gets all child in div.parent1 and div.parent2

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

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

Thess codes gets onli the children for parent 1

Thess 代码只获取父母 1 的孩子

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

回答by Rafay

use .childrenalong with .filter, if number of children are not certain then label all childs which you want to manipulate of parent1 as child1

使用.children以及.filter，如果孩子的数量并不一定那么标签要操纵parent1为child1的所有孩子的

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

here is the fiddle http://jsfiddle.net/8hUqV/1/

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

jquery children

jquery children