Question

我是编程和堆栈溢出的新手，所以如果我没有正确格式化我的问题，请原谅我：）

我正在尝试遍历包含三个跨度的数组，并记录'data-strength'属性值。我可以使用$el[i]获得单个跨度，并且还可以使用$el.attr('data-strength')获取属性值。当我将两者$el[i].attr('data-strength')组合在一起时，会返回错误。我认为这是一个语法错误，但我喜欢一些指导。

我还包括下面的笔链接。感谢!!!

<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

var $trigger = $("#trigger"),
    $el = $("#strength span"),
    $counter = $el.length;

$trigger.click(function(){
    for(var i = 0; i < $counter; i++){   
        var $result = $el[i].attr('data-strength');
    console.log($result);
    }  
});

https://codepen.io/joeylane/pen/dmGpdq

Answer 1

$el[i]不是jQuery对象。您必须$($el[i])才能使用attr

＆＃13;

var $trigger = $("#trigger"),
  $el = $("#strength span"),
  $counter = $el.length;

$trigger.click(function() {
  for (var i = 0; i < $counter; i++) {
    var $result = $($el[i]).attr('data-strength');
    console.log($result);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

＆＃13;

您还可以使用each循环播放数组并使用this作为选择器。

$trigger.click(function(){
    $el.each(function(){
        var $result = $(this).attr('data-strength');
        console.log($result);
    });
});

Answer 2

只需迭代div中的跨度并使用$（this）。（）来获取每个的数据属性。

＆＃13;

$("#trigger").click(function(){
  $("#strength span").each(function(){
    var strength = $(this).attr('data-strength');
    console.log(strength);
  })  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

＆＃13;

循环遍历数组并返回数据属性值

2 个答案: