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

Question

我需要使用父 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>

Answer 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>