Добавьте класс ко всем дочерним меткам в каждом родительском 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

Я добавляю скрипт для добавления класса

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

Я полагаю, что вы можете сделать что-то вроде этого.

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

Кроме того, если вы хотите, чтобы он перезапускал приращение для каждой таблицы радио, вы можете сделать следующее. Это, как говорится, может быть более производительным решением.

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

Answer 3

Вы можете попробовать с помощью 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>