使用 div 中的标签计数将类添加到每个父 div 中的所有子标签答案

【问题标题】：Add class to all child labels in each parent div using label count in div使用 div 中的标签计数将类添加到每个父 div 中的所有子标签
【发布时间】：2020-02-08 13:07:27
【问题描述】：

我需要使用父 div 中的标签计数为每个父 div 中的所有子标签添加类。

我有一个动态生成的单选按钮组代码，所以我不能使用 html 添加静态类

使用这些类，我需要在标签中附加另一个 div 作为标签帮助文本。

<div class="radioTable">
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
</div>
<div class="radioTable">
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
</div>

想像这样使用 jquery 添加类：

<div class="radioTable">
 <div>
    <span>
       <label class="radioLabel-1"></label>
   </span>
</div>
 <div>
    <span>
       <label class="radioLabel-2"></label>
   </span>
</div>
</div>
<div class="radioTable">
 <div>
    <span>
       <label class="radioLabel-1"></label>
   </span>
</div>
 <div>
    <span>
       <label class="radioLabel-2"></label>
   </span>
</div>
 <div>
    <span>
       <label class="radioLabel-3"></label>
   </span>
</div>
</div>

【问题讨论】：

到目前为止你尝试了什么？
嗨，欢迎来到堆栈溢出。请参考How to Ask 链接并相应地更新您的问题。

标签： javascript jquery html css

【解决方案1】：

您可以尝试使用querySelectorAll() 来定位特定字段，并使用forEach() 循环它们以添加相关类，如下所示：

var parents = document.querySelectorAll('.radioTable');
Array.from(parents).forEach(function(p){
  var labels = p.querySelectorAll('label');
  var classPre = 'radioLabel-';
  Array.from(labels).forEach(function(l, i){
    l.classList.add(classPre + (i+1));
  });
});

.radioLabel-1{ color:#00cc00 }
.radioLabel-2{ color:#ff0000 }
.radioLabel-3{ color:#0000ff }

<div class="radioTable">
 <div>
    <span>
       <label>RadioLabel-1</label>
   </span>
</div>
 <div>
    <span>
       <label>RadioLabel-2</label>
   </span>
</div>
</div>
<div class="radioTable">
 <div>
    <span>
       <label>RadioLabel-1</label>
   </span>
</div>
 <div>
    <span>
       <label>RadioLabel-2</label>
   </span>
</div>
 <div>
    <span>
       <label>RadioLabel-3</label>
   </span>
</div>
</div>

【讨论】：

谢谢，但输出节目正在添加类，如 1、2、3、4、5。
我希望它是像 1,2 和 1,2,3 这样的类
@Praveen，请检查更新后的代码，我添加了一些样式以及明显的差异:)
我有根据您的要求的固定代码。请检查。 @praveen 输出将显示在检查 -> 元素中。

【解决方案2】：

我相信你可以做这样的事情。

$("div.radioTable span > label").each(function(index) {
  $(this).addClass(`radioLabel-${index + 1}`);
});

此外，如果您希望它重新启动每个 radioTable 的增量，您可以执行以下操作。话虽这么说，可能会有更高效的解决方案。

$("div.radioTable").each(function() {
  $(this).find("span > label").each(function(index) {
    $(this).addClass(`radioLabel-${index + 1}`)
  });
});

【讨论】：

您的解决方案是最简单的，我相信..您只需将 1 添加到 index，这样它就不会从 0 开始。干得好！
更新为从 1 开始而不是 0。谢谢！

【解决方案3】：

我添加脚本来添加类

$(document).ready(function(){

$("div.radioTable").each(function(index, item) {
debugger;
 $("label", item).each(function(indexx,itemm){
 $(this).addClass("radioLabel-"+ (indexx + 1));
 //console.log( index + ": " + $(this).text() );
 })
 
});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioTable">
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
</div>
<div class="radioTable">
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
 <div>
    <span>
       <label></label>
   </span>
</div>
</div>

【讨论】：