CODEWITHSUNDEEP
javascriptjqueryhtml
Kona Laxman Deepak
Kona Laxman Deepak

Reputation: 280

How to get the span element name having the same class name

I want to get the name of the span element by using javascirpt and following is the code.

HTML

<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>

JS

var spans = document.getElementsByClassName("myClass");
              j=1;
              for(var i=0; i < spans.length; i++){
                 alert("i value is==>"+i);                
                  spans[i].innerHTML=j;
            var obj=spans[i];
            alert("name==>"+obj.name);
                  j++;                  
              }

Please suggest and as name getting undefined.

Upvotes: 0

Views: 1187

Answers (2)

kind user
kind user

Reputation: 41893

If you want to get the name attribute of an element, you have to use getAttribute function.

Your solution (ES5): 

var spans = document.getElementsByClassName("myClass"),
    j = 0;

for (var i = 0; i < spans.length; i++) {
  alert("i value is==>" + spans[i].getAttribute('name'));
  spans[i].innerHTML = j;
  var obj = spans[i];
  alert("name==>" + obj.getAttribute('name'));
  j++;
}
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>

ES6 solution.

let elems = document.getElementsByClassName('myClass');
Array.from(elems).forEach(v => console.log(v.getAttribute('name')));
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>

Upvotes: 2

j08691
j08691

Reputation: 207901

In jQuery it would be:

$('.myClass').each(function(){
    console.log( $(this).attr('name') )
})


    $('.myClass').each(function(){
        console.log( $(this).attr('name') )
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>
<span class="myClass" name="q1"></span>

Upvotes: 4

Related Questions