我需要使用父 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>
最佳答案
你可以试试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>
关于javascript - 使用 div 中的标签计数将类添加到每个父 div 中的所有子标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58333890/