Jquery - Как добавить динамические идентификаторы и для текста для соответствующих меток

Question

У меня есть один список элементов с флажками, которые динамически загружаются из серверной части.

Вот HTML-конструктор, который у меня есть в моем браузере.

<ul>
    <li><input type="checkbox" /><label>Details 1</label></li>
    <li><input type="checkbox" /><label>Details 2</label></li>
    <li><input type="checkbox" /><label>Details 3</label></li>
    <li><input type="checkbox" /><label>Details 4</label></li>
    .... and so on
</ul>

Количество списков может быть изменено в любой момент времени в соответствии с динамическим управлением.

Дело в том, что я хочу постепенно добавлять 'ID' для флажков и добавить атрибут 'for' для соответствующего контейнера меток. Само собой разумеется, что то же самое имя идентификатора должно быть применено и к соответствующему атрибуту метки.

Как мне добиться этого с помощью jQuery.

Заранее спасибо.

Answer 1

var listItems = $('ul li');
listItems.each(function(idx, li) {
    $(this).find('input').attr('id','chkbox'+idx);
    $(this).find('label').attr('for','chkbox'+idx);
});

Я использовал each из jquery, проверьте это независимо от того, какое количество элементов списка можно использовать там.

[1]:

var listItems = $("ul li");
listItems.each(function(idx, li) {
    $(this).find('input').attr('id','chkbox'+idx);
    $(this).find('label').attr('for','chkbox'+idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><input type="checkbox" /><label>Details 1</label></li>
    <li><input type="checkbox" /><label>Details 2</label></li>
    <li><input type="checkbox" /><label>Details 3</label></li>
    <li><input type="checkbox" /><label>Details 4</label></li>
</ul>

Answer 2

Рабочая скрипка

использование

в jquery

var countValueYouSet=1;
    $("ul li ").each(function(){
        $('input').attr('id',countValueYouSet);
        $('label').prop('for',countValueYouSet);

        countValueYouSet++;
    });

Answer 3

Попробуйте следующее.

Найти все ярлыки, которые следуют за input элемент и которые не имеют for атрибут, затем создайте идентификатор и назначьте его for атрибут и id предыдущего элемента (input).

$('input + label:not([for])').each(function(index, item){
   var id = 'checkbox-' + index,
       label = $(this);
   label.prop('for', id )
        .prev().prop('id', id);
});

$('input + label:not([for])').each(function(index, item){
  
  var id = 'checkbox-' + index,
      label = $(this);
  
  label.prop('for', id )
       .prev().prop('id', id);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li><input type="checkbox" /><label>Details 1</label></li>
    <li><input type="checkbox" /><label>Details 2</label></li>
    <li><input type="checkbox" /><label>Details 3</label></li>
    <li><input type="checkbox" /><label>Details 4</label></li>
</ul>

Answer 4

Есть два очевидных варианта, первый - добавить id а также for:

$('input').prop('id', function(i) {
  var id = 'input' + i;
  $(this).next('label').attr('for', id);
  return id;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" />
    <label>Details 1</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 2</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 3</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 4</label>
  </li>
</ul>

Во-вторых, просто переместить input внутри label:

$('input').each(function() {
  $(this).prependTo(this.nextElementSibling);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" />
    <label>Details 1</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 2</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 3</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 4</label>
  </li>
</ul>

Рекомендации:

• JavaScript:
  • node.nextElementSibling,
• JQuery:
  • attr(),
  • next(),
  • prependTo(),
  • prop(),