Блог

Главная - Вопросы по программированию - Как я могу динамически добавлять идентификаторы и добавлять метки к каждому флажку

Как я могу динамически добавлять идентификаторы и добавлять метки к каждому флажку

#jquery

#jquery

Вопрос:

У меня есть таблица, заполненная флажками, ни у одного из них нет идентификаторов. У меня нет возможности изменить HTML, чтобы добавить идентификатор флажка, а затем добавить метку, чтобы я мог стилизовать с помощью FontAwesome.

Чтобы сгенерировать идентификатор для каждого флажка, я добавил эту функцию

 $("input").each(function () {
    $(this).uniqueId();
});

Текущий HTML-код выглядит следующим образом

 <tr><td>
<input type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input type="checkbox" name="WR0002" value="13444">
</td></tr>

Сейчас скрипт добавляет UniqueID к каждому входу, но я хотел добавить метку, которая соответствовала бы каждому входному идентификатору, как я могу это сделать, чтобы результирующий HTML выглядел так

 <tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
<label for="randomID1"></label>
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
<label for="randomID2"></label>
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
<label for="randomID3"></label>
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
<label for="randomID4"></label>
</td></tr>

Ответ №1:

После создания идентификаторов вы можете создать элемент label и помещать его после каждого ввода с помощью .after():

 $("input").each(function () {
    // $(this).uniqueId();
    let label = document.createElement('label');
    label.setAttribute('for', this.id);
    label.innerText = this.id;
    $(this).after(label);
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
</td></tr>
</table>

Ответ №2:

Назначьте UniqueID переменной, а затем добавьте ее.

 $("input").each(function () {

    let id = 'randomID4';

   $('#' id).append('<label for=' id '></label>');

});

Ответ №3:

Вы можете сделать это multiple способами, и вы можете выбрать то, что подходит вам лучше всего ниже. Вам даже не нужно использовать uniqueId плагин для добавления id's

1-е решение

Вы можете просто counter добавить id a . После добавления идентификаторов используйте метод переноса всех id's идентификаторов с помощью a label и вашего текста choice .

 $('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'), //some text for each label
    for: $(this).id //id
  })
})

Живая демонстрация:

 var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID'   counter)
  counter  
});

$('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'),
    for: $(this).id
  })
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>

</table>

2-е решение

Если вы хотите сделать все в одной функции, вы можете использовать просто append функцию, подобную приведенной ниже:

 var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID'   counter) //assign ID
  counter  
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for='   getID   '>'   getID   '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});

Живая демонстрация: 

 var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID'   counter) //assign ID
  counter  
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for='   getID   '>'   getID   '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>
</table>