CODEWITHSUNDEEP
jqueryinput
dragoweb
dragoweb

Reputation: 731

How to get the ID of each element?

I have multiple input with different IDs and I'm searching for a way to find the ID of each one. I made a pen here but, basically, here is what I've tried so far.

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

My goal is just to get the ID of each input separately. But with this var i, I only get the ID of the first input ("one" on each line). When I use .each(), all IDs are displayed together (one,two,three,four,five,six).

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

My jQuery knowledge is limited and I already spent hours trying different solutions found on stack, so any help would be much appreciated.

Upvotes: 0

Views: 104

Answers (3)

Kunal Mukherjee
Kunal Mukherjee

Reputation: 5853

Iterate over each of the input using $.each, then create a DOM element label and find the parent of the current input element and append the newly created label into it.

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

Upvotes: 0

thống nguyễn
thống nguyễn

Reputation: 831

Here you are:

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

Upvotes: 1

Pete
Pete

Reputation: 58432

If you are just trying to add a label of the id after the input, you need to do that in your each loop (rather than trying to put them all in an array and append that after the each has finished)

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

Upvotes: 1

Related Questions