Question

我正在尝试向类"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>

以下内容有效，但前提是类别为div的第一个"C"元素是类别"A"的第二个子元素。但是，情况并非总是如此。

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

是否有一种方法可以定位类别为"A"的类别"C"的第一个孩子？

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

谢谢。

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>

Answer 2

在CSS中，不可能只有一个选择器来完成此操作，但是您可以首先选择所有类C元素，然后消除那些不在同级中的元素。可以在.C ~.C中选择那些在兄弟姐妹中具有前任的对象。这样您就可以链接.not(".C ~ .C")

现在jQuery支持CSS选择器的扩展，因此您可以使用:not将第二个排除项嵌入到主选择器中：

$('.A > div.C:not(.C ~ .C)')

这与您的其余代码配合使用。

$('.A > div.C:not(.C ~ .C)').each(function(index, elem) {
    elem.id = "c" + index;
});

console.log(container.innerHTML);

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

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

2 个答案: