如何获得具有相同类名的span元素名称

Question

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.

Answer 1

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> 

Answer 2

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>