求助：如何获取多个YoutubePlaylist类元素的data属性？jQuery代码问题

嘿，我来帮你搞定这个问题！你的代码报错的原因很明确：当你用.get(i)获取元素时，得到的是原生的DOM节点，而不是jQuery包装后的对象，所以它没有.attr()方法——这就是你运行时出错的根源。

咱们来一步步修正，同时给你几种更优雅的实现方式：

方式1：修正你原来的代码 #

把.get(i)换成.eq(i)，因为.eq(i)返回的是jQuery对象，这样就能正常调用.attr()了：

$(function() { 
  getUserName(); 
}); 

function getUserName() { 
  var $playlists = $('div.YoutubePlaylist'); // 先缓存集合，避免重复查询DOM
  var o = $playlists.length; 
  for (var i = 0; i < o; i++) { 
    console.log($playlists.eq(i));
    console.log($playlists.eq(i).attr('data-username'));
    console.log($playlists.eq(i).attr('data-playlist')); 
  } 
};

另外建议把DOM查询结果缓存到变量$playlists里，避免每次循环都重新查询DOM，提升性能。

方式2：用jQuery的.each()遍历（更推荐） #

jQuery本身提供了更简洁的遍历方法.each()，完全不用手动写for循环，代码更清晰：

$(function() {
  $('div.YoutubePlaylist').each(function(index, element) {
    // 方式A：用.attr()获取
    console.log($(this).attr('data-username'));
    console.log($(this).attr('data-playlist'));

    // 方式B：用jQuery的.data()方法（更推荐）
    // .data()会自动解析data-*属性，还能转换类型（比如数字、布尔值）
    console.log($(this).data('username'));
    console.log($(this).data('playlist'));

    // 方式C：用原生DOM的dataset属性（不用jQuery方法）
    console.log(element.dataset.username);
    console.log(element.dataset.playlist);
  });
});

这里给了你三种获取data属性的方式，其中.data()是jQuery官方推荐的，它会把data-username自动映射成username，还能处理类型转换，非常方便。

为什么原来的代码会报错？ #

再强调一下：$("div.YoutubePlaylist").get(i)返回的是原生的HTMLDivElement对象，它没有.attr()方法——这个方法是jQuery对象独有的。如果你想用原生方式获取，可以用element.dataset或者element.getAttribute('data-username')，这两种原生写法也能正常工作。

内容的提问来源于stack exchange，提问作者user7484347