Question

我希望使用javascirpt获取span元素的名称，以下是代码。

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++;                  
              }

请建议并且名称未定义。

Answer 1

在jQuery中它将是：

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

如果要获取元素的name属性，则必须使用getAttribute函数。

您的解决方案（ 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 解决方案。

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>

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

2 个答案: