2

Hi I have one section tag used in my page where i have multiple span with different id like below is having one example:

<section class="blog-summary-read col-md-6 col-md-offset-1">
  <span id="spnid2">2</span>
  <span id="spnid3">3</span>
  <span id="spnid4">4</span>
  <span id="spnid5">5</span>
  <span id="spnid6">6</span>
</section>

How do i get each span id using jquery?

Vikash
  • 340
  • 1
  • 5
  • 24
  • Possible duplicate of [jQuery - selecting elements from inside a element](http://stackoverflow.com/questions/5808606/jquery-selecting-elements-from-inside-a-element) – Sudharsan S Dec 07 '16 at 08:48

4 Answers4

6

Get all span element and then iterate to get the id.

/** Method 1 : to get as an array **/

console.log(
  // get all span elements have id and within section 
  $('section span[id]')
  // iterate to generate the array of id
  .map(function() {
    // return the id value
    return this.id;
  })
  // get array from jQuery object
  .get()
)

/** Method 2 : just iterating **/

$('section span[id]').each(function() {
  console.log(this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="blog-summary-read col-md-6 col-md-offset-1">
  <span id="spnid2">2</span>
  <span id="spnid3">3</span>
  <span id="spnid4">4</span>
  <span id="spnid5">5</span>
  <span id="spnid6">6</span>
</section>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • 1
    Pranav, Your solution is perfect i just added this code with each function to get id. var spnid = $(this.id).selector; Because if i am not using selector here getting some other properties also which is not require. Any how thanks for your valuable solution. I am voting your answer. – Vikash Dec 08 '16 at 08:24
2

$('span').each(function(i, v) {

  console.log($(this).attr('id'))

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="blog-summary-read col-md-6 col-md-offset-1">
  <span id="spnid2">2</span>
  <span id="spnid3">3</span>
  <span id="spnid4">4</span>
  <span id="spnid5">5</span>
  <span id="spnid6">6</span>
</section>

Iterate over each span using .each() then get its id using attr()

guradio
  • 15,524
  • 4
  • 36
  • 57
1

Using each function u get all span id's

$('.blog-summary-read span').each(function() {
  console.log(this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="blog-summary-read col-md-6 col-md-offset-1">
  <span id="spnid2">2</span>
  <span id="spnid3">3</span>
  <span id="spnid4">4</span>
  <span id="spnid5">5</span>
  <span id="spnid6">6</span>
</section>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26
0

Now you have 3 versions to choose from ... this version selects only the spans inside the section with class "blog-summary-read"

var spans = $('span', '.blog-summary-read');
spans.each(function(index, element){
  console.log($(element).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="blog-summary-read col-md-6 col-md-offset-1">
  <span id="spnid2">2</span>
  <span id="spnid3">3</span>
  <span id="spnid4">4</span>
  <span id="spnid5">5</span>
  <span id="spnid6">6</span>
</section>
Flyer53
  • 754
  • 6
  • 14