遍历数组并返回数据属性值答案

【问题标题】：Loop through array and return the data attribute value遍历数组并返回数据属性值
【发布时间】：2018-03-16 02:59:14
【问题描述】：

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

我正在尝试遍历包含三个跨度的数组，并记录“数据强度”属性值。我可以使用$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

【问题讨论】：

标签： javascript jquery arrays loops

【解决方案1】：

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

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

<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>

您还可以使用each 循环遍历您的数组并使用this 作为选择器。

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

【讨论】：

然后是$().data，它会自动解析 JSON 并让您使用元素存储任意数据（尽管它不会反向编辑属性）
你也可以使用.eq()来获取该索引处元素的jquery对象
谢谢大家。你所有的建议都很棒而且正确:)

【解决方案2】：

只需遍历 div 中的 span 并使用 $(this).() 来获取每个的数据属性。

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

<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>

【讨论】：