Question

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

我有一个动态生成的单选按钮组代码，因此我无法使用html添加静态类

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

@media only screen and (max-width: 767px) {
 .image{
   width: 100%;
 }
}

想使用jquery这样添加类：

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

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>

Answer 2

我添加脚本来添加类

$(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>

Answer 3

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

$("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}`)
  });
});

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

3 个答案: