Как получить идентификатор каждого элемента?

ProgramBox

Как получить идентификатор каждого элемента?

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#jquery #input

#jquery #ввод

Вопрос:

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

 // DISPLAYS ALL ID's
var id = [];
$('input').each(function() {
  id.push($(this).attr('id'))
})

// DISPLAYS THE FIRST ID
var ids = $('.content div').find('input').attr('id');

// DISPLAYS THE FIRST ID
var i = $('input').get(0).id

// APPEND LABEL
var customlabel = $('<label>input ID = #'   i   '</label>');
$('.content div').append(customlabel);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div><input type='radio' id="one" /></div>
  <div><input type='radio' id="two" /></div>
</div>
<div class="content">
  <div><input type='radio' id="three" /></div>
  <div><input type='radio' id="four" /></div>
</div>
<div class="content">
  <div><input type='radio' id="five" /></div>
  <div><input type='radio' id="six" /></div>
</div>

Моя цель — просто получить идентификатор каждого ввода отдельно. Но с этой переменной i я получаю только идентификатор первого ввода («один» в каждой строке). Когда я использую .each(), все идентификаторы отображаются вместе (один, два, три, четыре, пять, шесть).

   var id=[];
  $('input').each(function(){
    id.push($(this).attr('id'))
  })

Мои знания jQuery ограничены, и я уже потратил несколько часов, пробуя различные решения, найденные в stack, поэтому буду признателен за любую помощь.

1. Каков ожидаемый результат? Как должна выглядеть разметка в конце?

2. Из вашего примера похоже <label> , что это неправильный элемент. Предполагается, что он должен быть обернут вокруг <input /> элемента или связан с <input /> элементом через его for="..." атрибут

3. Да, метка связана с помощью атрибута «for =»», но я хотел сделать этот вопрос как можно более простым. У меня пока есть 2 рабочих решения (от Пита и Тхонга), так что спасибо за вашу помощь.

Ответ №1:

Вот вы где:

 $(".content div").each(function(){
    let id = $("input", this).attr("id");
    $(this).append("<label>" id "</label>");
});

1. Извините, но я не понимаю, почему, когда я использовал .each(), он отображал все идентификаторы в каждой строке. В чем разница с вашим сниппетом? В любом случае, ваше решение отлично работает, так что большое спасибо.

2. вы имеете в виду это?:<br/> ** var id=[]; $(‘input’).each(function(){ id.push($(this).attr(‘id’)) })**<br/> ваше кодовое слово вот так:<br/> **#1: объявить пустой массив с именем id **<br/> **#2: для каждого ввода помещайте идентификатор ввода в конец массива идентификаторов **<br/> вот почему они выводятся одновременно — надеюсьэто понятно.

3. Хорошо, я понял. Еще раз спасибо за вашу помощь. Очень признателен.

Ответ №2:

Если вы просто пытаетесь добавить метку идентификатора после ввода, вам нужно сделать это в каждом цикле (вместо того, чтобы пытаться поместить их все в массив и добавить это после завершения каждого)

 $('input').each((index, input) => {
  const $thisInput = $(input);  // current input
  
  $thisInput.after(`<label for="${input.id}">input id = #${input.id}</label>`);  // add a label after the current input
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div><input type='radio' id="one" /></div>
  <div><input type='radio' id="two" /></div>
</div>
<div class="content">
  <div><input type='radio' id="three" /></div>
  <div><input type='radio' id="four" /></div>
</div>
<div class="content">
  <div><input type='radio' id="five" /></div>
  <div><input type='radio' id="six" /></div>
</div>

Ответ №3:

Выполните итерацию по каждому из входных данных, используя $.each , затем create a DOM element label и найдите parent текущий входной элемент и append вновь созданную метку в нем.

 $(function() {
  $.each($('input[type="radio"]'), function(key) {
    const label = $('<label/>').text(`input ID = #${key   1}`);
    $(this).parent().append(label);
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div><input type='radio' id="one" /></div>
  <div><input type='radio' id="two" /></div>
</div>
<div class="content">
  <div><input type='radio' id="three" /></div>
  <div><input type='radio' id="four" /></div>
</div>
<div class="content">
  <div><input type='radio' id="five" /></div>
  <div><input type='radio' id="six" /></div>
</div>