选择：attr名称的第一个孩子

Question

我想知道如何通过给出attr来选择元素的第一个？

示例：

<div data-name>
    <span></span>
    <span data-sub-name>1</span>
    <span data-sub-name>2</span>
</div>

jQuery：

$('[data-name] > [data-sub-name]:first-child').addClass('active');

在[data-sub-name]

之前的某个元素时，它不起作用

我缺少什么？

演示： http://jsfiddle.net/7cn1ymq4/

编辑：如果有多个组

，则应该有效

Answer 1

使用:first代替:first-child

$('[data-name] > [data-sub-name]:first').addClass('active');

Updated fiddle

如果您有多组元素，则需要遍历每个元素：

$('[data-name]').each(function() {
    $(this).find('[data-sub-name]:first').addClass('active');
})

Example fiddle

Answer 2

试试这个： -

$('[data-name]').find('[data-sub-name]:first').addClass('active');

Demo

Answer 3

您可以使用first：

$('[data-name] > [data-sub-name]').first().addClass('active');

working fiddle

---

根据您更新的问题对多个群组：

$('[data-name]').each(function(){
  $('>[data-sub-name]',this).first().addClass('active');
});

working fiddle