Question

我似乎无法弄清楚如何将一个类添加到其父级内的一组元素中。

示例：

<div class="block">
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
</div>
<div class="block">
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
</div>

我希望它看起来像这样：

<div class="block">
  <a href="#" class="thumbnail group1"></a>
  <a href="#" class="thumbnail group1"></a>
  <a href="#" class="thumbnail group1"></a>
</div>
<div class="block">
  <a href="#" class="thumbnail group2"></a>
  <a href="#" class="thumbnail group2"></a>
  <a href="#" class="thumbnail group2"></a>
</div>

我尝试了类似的内容：

$("div.Block a").attr("class", function (arr) {
  return "group" + arr;
});

但是返回块内的类都有不同的数字而不是组。也许就像在父div上使用它并以某种方式将主div类复制到它的每个子节点之后？

Answer 1

$("div.block").each(function(i){
    $(this).find("a").addClass("group" + (i + 1));
});

Answer 2

$('div.block').each(function(idx) {
    $('a', this).addClass('group' + (idx + 1));
});

Answer 3

您可以使用以下代码

执行此操作

$("div.block").each(function(index){
  $(this).find('a').addClass("group" + (index+1));
})

Answer 4

尝试如下，

//     v-- Note: your div class is block not Block.
$("div.block").each (function (idx) { 
    $(this).find('a').addClass('group' + (idx+1));
});

Answer 5

遍历div并使用该迭代器中的索引：

$(".block").each(function(i,e){
    $("a",e).addClass("group" + (i+1));
})

注意使用addClass而不是attr。另请注意，使用e（元素）作为“a”选择器的上下文

将数字类应用于子元素

5 个答案: