JavaScript/jQuery选择父元素内的所有子元素

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>

考虑以上示例，如何获取类parent1中的所有子元素(.child1到.child49)？

我知道在jQuery中可以使用多个选择器来实现：

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

有没有更好的方法呢？我不总是知道每个父元素中有多少个子元素。

编辑：此外，该父元素中可能还有其他具有不同类名的子元素，而我不想选择这些子元素；我特别想选择所有“child*”类。

- James Nine

Answer 1

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

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

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

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

这是使用了CSS3属性选择器，jQuery已经实现并在某些情况下进行了扩展。根据文档： E[foo^="bar"]表示一个E元素，其"foo"属性值恰好以字符串"bar"开头。

- andyb

---

这只选择SPAN，有没有办法选择所有子元素？ - Greg L

@GregL 是的，这回答了问题，其中_child_ 指的是类而不是元素关系。你的问题是不同的，应该单独提出。话虽如此，如果你只想要特定元素下的所有子元素，你可以使用 CSS 通用选择器 * 和子元素组合器 >，例如 $('div > *') 将选择 <div> 的所有直接子元素。 - andyb

Answer 2

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

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

这些代码仅获取父级1的子元素

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

- Jose Adrian

---

谢谢，如果我有其他的span在父div里面，但是我不想选择它们；比如一个没有标记为“child”的span，但是有一个不同的类名叫做“something_else”，我不想选择那个span。 - James Nine

我不确定我是否理解你的意思，但是可以试试这个：$('.parent1 span:not(.something_else)')... 我想是这样的。 - Jose Adrian

Answer 3

如果子元素的数量不确定，可以使用.children和.filter。将要操作的子元素标记为child1，以便从parent1中筛选出来。

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

这里是 JSFiddle http://jsfiddle.net/8hUqV/1/

jQuery children

- Rafay