遍历span数组获取data-strength属性值报错求助

嗨，别担心，刚接触编程和Stack Overflow完全不用不好意思，咱们一步步来解决这个问题～

你遇到的报错核心原因是：$el[i]获取到的是原生DOM元素，而.attr()是jQuery对象独有的方法，原生元素没法直接调用它。

几个可行的解决方案： #

1. 使用jQuery的.eq()方法（推荐）

.eq(i)会返回对应索引的jQuery对象，这样就能正常调用.attr()了：

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

2. 将原生DOM元素转为jQuery对象

用$()把$el[i]包裹起来，转换成jQuery对象后再调用方法：

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

3. 使用原生DOM的属性获取方法

既然拿到的是原生元素，也可以直接用原生API来获取属性，两种方式：

// 方式一：getAttribute
var $result = $el[i].getAttribute('data-strength');

// 方式二：dataset（更现代，针对data-开头的属性）
var $result = $el[i].dataset.strength;

4. 更简洁的jQuery遍历方式：.each()

其实jQuery提供了专门的遍历方法.each()，不用手动写for循环，代码更简洁：

$trigger.click(function(){
    $el.each(function() {
        // 这里的this是当前遍历到的原生DOM元素
        console.log($(this).attr('data-strength'));
        // 或者用原生方式：this.getAttribute('data-strength')
    });
});

这样修改后，就能正常打印每个span元素的data-strength属性值啦～

内容的提问来源于stack exchange，提问作者joey-lane