CODEWITHSUNDEEP
javascripthtmlclass
Bayu Anggara
Bayu Anggara

Reputation: 287

Get id value from multiple class

Is it possible to get id value from some same classes ? this is my clear.html

<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

and here is clear.js

$(document).ready(function(){
    var curLoadProv = document.querySelector('.number').id;
    console.log(curLoadProv)
});

but it just print 1 , how can I print the 2 and 3?

Upvotes: 3

Views: 3313

Answers (7)

amitguptageek
amitguptageek

Reputation: 537

$(document).ready(function(){
    $(".number").each(function() {
        console.log($(this).attr('id'));
    });
});

Upvotes: 1

Kishor Vitekar
Kishor Vitekar

Reputation: 535

Use below code snippet.

$(document).ready(function(){
    var elements = document.querySelectorAll('.number');
    for(var i = 0; i<elements.length; i++){
          console.log(elements[i].id);
    }
});

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30567

If you want to print them separately, use each

$('.number').each(function() {
  console.log($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

If you want them in an array, use map

var ids = $('.number').map(function() {
  return $(this).attr('id');
}).get();

console.log(ids);
console.log(ids.join(','));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

Upvotes: 5

mitra p
mitra p

Reputation: 440

We can get values based on id

var value=document.getElementById("id").innerhtml;

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is document.querySelector() will return only the first element satisfying the given selector.

Since you seems to be using jquery, use jQuery with class selector to fetch all the elements with the class number and then iterate over it using .each() and log the id of each elements

$(document).ready(function() {
  $('.number').each(function() {
    snippet.log(this.id)
  })
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

Upvotes: 1

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

Non jQuery answer:

document.addEventListener("DOMContentLoaded", function() {
  var numbers = document.querySelectorAll('.number');
  Array.protoype.forEach.call(numbers, function(number) {
    console.log(number);
  });
}, false);

Upvotes: 3

VisioN
VisioN

Reputation: 145408

The following code will return an array with IDs of all elements with class .number:

$('.number').map(function() { return this.id; }).get();  // ["1", "2", "3"]

The following code will iterate all elements with class .number and output their IDs to the console:

$('.number').each(function() {
    console.log( this.id );
});


$('#first').text(
  $('.number').map(function() { return this.id; }).get()
);

$('.number').each(function() {
  $('#second').append(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

<div id="first"></div>
<div id="second"></div>

Upvotes: 1

Related Questions