jquery - jQuery：选择类等于特定类的nth-child（1）

Question

我正在尝试为class"cn"的每个第一个div元素添加一个唯一 ID "C"，如下所示：

<div class="A">
    <div class="B"></div>
    <div class="C" id="c0"></div>
    <div class="C"></div>
    <div class="C"></div>
</div>

<div class="A">
    <div class="B"></div>
    <div class="C" id="c1"></div>
    <div class="C"></div>
    <div class="C"></div>
</div>

以下方法有效，但前提是 class 为的第一个div元素是 class"C"的第二个子元素"A"。然而，情况可能并非总是如此。

$('.A :nth-child(2)').each(function(index, elem) {
        elem.id = "c" + index;
});

有没有办法针对班级的第一个孩子的"A"班级是"C"？

$('.A .C:nth-of-class(1)')我猜是这样的。

提前致谢。

标签： jquery

Answer 1

我看到我的第一个猜测是你丢弃的一个，但你可以测试它是否是 C

$("div.A >:nth-child(2)").each(function(i) { 
  if ($(this).is(".C")) $(this).attr("id","c"+i)
});

// NOTE if there are As that do not have ANY Cs you can do this
/*
var cnt=0
$(".A").each(function() {
  var $c = $(this).find(".C").eq(0);
  if ($c.length==1) $c.attr("id","c"+(cnt++))
});
*/

#c0 { color:red }
#c1 { color:green }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A">
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="C">C</div>
    <div class="C">C</div>
</div>

<div class="A">
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="C">C</div>
    <div class="C">C</div>
</div>

您也可以使用 .eq

$(".A").each(function(i) {
  $(this).find(".C").eq(0).attr("id","c"+i)
});

#c0 { color:red }
#c1 { color:green }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A">
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="C">C</div>
    <div class="C">C</div>
</div>

<div class="A">
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="C">C</div>
    <div class="C">C</div>
</div>