Question

我是否正在努力获取这些多个类的数据值？

＆＃13;

$(function() {
  getUserName();
});

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").get(i));
    console.log($("div.YoutubePlaylist").get(i).attr('data-username'));
    console.log($("div.YoutubePlaylist").get(i).attr('data-playlist'));
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

Answer 1

通过 .each()和.data()

简化您的代码

$(document).ready(function(){
    $('.YoutubePlaylist').each(function(){
        console.log($(this).data('username'));
        console.log($(this).data('playlist'));
    });
});

工作代码段： -

$(document).ready(function() {
  $('.YoutubePlaylist').each(function() {
    console.log($(this).data('username'));
    console.log($(this).data('playlist'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

Answer 2

get()方法返回DOM对象，因此attr()方法无法使用它。要获取jQuery对象，请使用eq()方法并对其应用attr()方法。

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

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").eq(i).attr('data-username'));
    //                                ---^^^^^----
    console.log($("div.YoutubePlaylist").eq(i).attr('data-playlist'));
    //                                ---^^^^^----
  }
};

＆＃13;

$(function() {
  getUserName();
});

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").eq(i).attr('data-username'));
    console.log($("div.YoutubePlaylist").eq(i).attr('data-playlist'));
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

在上面的代码中，您可以进行一些修改以获得更好的性能（缓存引用，使用data()方法等）。

$(function() {
  var $o = $('div.YoutubePlaylist'); // cache the refernece
  for (var i = 0; i < $o.length; i++) {
    console.log($o.eq(i).data('username')); // get data atribute value
    console.log($o.eq(i).data('playlist'));
  }
});

＆＃13;

$(function() {
  var $o = $('div.YoutubePlaylist');
  for (var i = 0; i < $o.length; i++) {
    console.log($o.eq(i).data('username'));
    console.log($o.eq(i).data('playlist'));
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

您可以使用jQuery each()方法简化代码，这有助于迭代jQuery元素集合。

$(function() {
  $('div.YoutubePlaylist').each(function() {
    console.log($(this).attr('data-username'));
    // or use 
    // console.log($(this).data('username'));
    // console.log(this.dataset['username'])
    console.log($(this).attr('data-playlist'));
    // or use 
    // console.log($(this).data('playlist'));
    // console.log(this.dataset['playlist'])
  })
});

＆＃13;

$(function() {
  $('div.YoutubePlaylist').each(function() {
    console.log($(this).attr('data-username'));
    // or use 
    // console.log($(this).data('username'));
    // console.log(this.dataset['username'])
    console.log($(this).attr('data-playlist'));
    // or use 
    // console.log($(this).data('playlist'));
    // console.log(this.dataset['playlist'])
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

Answer 3

您可以使用map获取属性值数组

var output = $("div.YoutubePlaylist").map((i, v) => $(v).attr("data-username")).get();

<强>演示

＆＃13;

var output = $("div.YoutubePlaylist").map((i, v) => $(v).attr("data-username")).get();
console.log(output);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

如果需要返回多个值，那么map可以返回一个对象

var output = $("div.YoutubePlaylist").map((i, v) => ({
  username: $(v).attr("data-username"),
  playlist: $(v).attr("data-playlist")
})).get();

<强>演示

＆＃13;

var output = $("div.YoutubePlaylist").map((i, v) => ({
  username: $(v).attr("data-username"),
  playlist: $(v).attr("data-playlist")
})).get();
console.log(output);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

＆＃13;

javascript / jquery value .get（）。attr（）

3 个答案: