javascript/jquery value .get().attr()

Question

I'm struggling with how is it possible to get the data-value of these multiple classes?

$(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'));
  }
};

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

1. use each; 2. use the cached object; 3. use jQuery methods where they improve readability — mplungjan, Mar 21 '18 at 10:33
Plain JS: `var list = document.querySelectorAll("div.YoutubePlaylist"); for (var i = 0; i < list.length; i++) { console.log(list[i].getAttribute('data-username'),list[i].getAttribute('data-playlist')); }` — mplungjan, Mar 21 '18 at 10:38

Alive to die - Anant · Accepted Answer · 2018-03-21T12:10:23.107

Simplify your code through .each() and .data()

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

Working snippet:-

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

Pranav C Balan · Answer 2 · 2018-03-21T10:45:39.207

The get() method returns DOM object so attr() method doesn't work with it. To get jQuery object use eq() method and apply attr() method on that.

$(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'));
    //                                ---^^^^^----
  }
};

$(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'));
  }
};

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

In the above code, you can make some modification for better performance(caching reference, using data() method etc).

$(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'));
  }
});

$(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'));
  }
});

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

You can simplify the code by using jQuery each() method, which helps to iterate over jQuery element collection.

$(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'])
  })
});

$(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'])
  })
});

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

Get the array of objects, why get it again and again? `var o = $('div.YoutubePlaylist'); (o.eq(i).attr('data-username')` — mplungjan, Mar 21 '18 at 10:26
@mplungjan : in first answer i just corrected his code.... he is just keeping collection length(in variable `o`) not object collection — Pranav C Balan, Mar 21 '18 at 10:28
@mplungjan : I know its always better to cache the reference.... but I just want to point out the issue in his code without any further confusion — Pranav C Balan, Mar 21 '18 at 10:29
PPS: The link you posted was one I found too, but it is more about how and where .attr/.data is STORING the data if you SET the values. That is very confusing since here in this case we just read them — mplungjan, Mar 21 '18 at 10:40

score 0 · Answer 3 · answered Mar 21 '18 at 10:22

You can use map to get an array of attribute values

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

Demo

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

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

If multiple values need to be returned, then map can return an object itself

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

Demo

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

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

javascript/jquery value .get().attr()

3 Answers3