CODEWITHSUNDEEP
javascriptjquery
MSOACC
MSOACC

Reputation: 3675

Getting data attributes whilst looping with .each() returns undefined

I am using a series of 's to store data on my webpage.

    <div style="display: none;">
       <span class="data_location" data-name="Joe Bloggs" data-description="Lorem ipsum" data-location="CA"></span>
       <span class="data_location" data-name="Jane Doe" data-description="Ipsom erum" data-location="AN"></span>
       <span class="data_location" data-name="John Doe" data-description="Dorem noloy" data-location="CZ"></span>
       <span class="data_location" data-name="William Gates" data-description="Lorem ipsum" data-location="AG"></span>
       <span class="data_location" data-name="Henry Kissinger" data-description="Nuymt calum" data-location="AN"></span>
    </div>

I want to loop through each of these spans, reading the data attributes one my one. The proof of concept code below always returns "undefined". 

        $(document).ready(function () {
            $.each(".data_location", function () {
                var location = $(this).data("location")
                alert(location)
            });
        });

I have a feeling the problem lies with the $(this) but I cannot identify. Can anyone help me out?

Upvotes: 0

Views: 44

Answers (4)

prasanth
prasanth

Reputation: 22500

array#each function is wrong declered. you could change like this $(".data_location").each(function () { .

Why undefined?

you are applying the array method each type .But $(".data_location") is not a array .its Object of the element

$(document).ready(function () {
            $(".data_location").each(function () {
                var location = $(this).data("location")
                console.log(location)
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;">
       <span class="data_location" data-name="Joe Bloggs" data-description="Lorem ipsum" data-location="CA"></span>
       <span class="data_location" data-name="Jane Doe" data-description="Ipsom erum" data-location="AN"></span>
       <span class="data_location" data-name="John Doe" data-description="Dorem noloy" data-location="CZ"></span>
       <span class="data_location" data-name="William Gates" data-description="Lorem ipsum" data-location="AG"></span>
       <span class="data_location" data-name="Henry Kissinger" data-description="Nuymt calum" data-location="AN"></span>
    </div>

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337646

The issue is because within the $.each() logic this does not refer to the element in the iteration. If you want to use this pattern, you would need to use the second parameter passed in to the handler function, which is the current element. Try this:

$(document).ready(function() {
  $.each($(".data_location"), function(i, obj) {
    var location = $(obj).data("location")
    console.log(location)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;">
  <span class="data_location" data-name="Joe Bloggs" data-description="Lorem ipsum" data-location="CA"></span>
  <span class="data_location" data-name="Jane Doe" data-description="Ipsom erum" data-location="AN"></span>
  <span class="data_location" data-name="John Doe" data-description="Dorem noloy" data-location="CZ"></span>
  <span class="data_location" data-name="William Gates" data-description="Lorem ipsum" data-location="AG"></span>
  <span class="data_location" data-name="Henry Kissinger" data-description="Nuymt calum" data-location="AN"></span>
</div>

However it would be more appropriate in this case to use $('.data_location').each(fn) and maintain the this reference within that handler function instead.

Upvotes: 0

achehab
achehab

Reputation: 47

Your each function is correct, however the callback method must contain 2 parameters 1 for the index, and the other for the element.

$(document).ready(function () {
    $.each($(".data_location"), function (index, element) {
       // Your $(this) equivalent will be $(element)
       var location = $(element).data("location");
       console.log(location);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;">
       <span class="data_location" data-name="Joe Bloggs" data-description="Lorem ipsum" data-location="CA"></span>
       <span class="data_location" data-name="Jane Doe" data-description="Ipsom erum" data-location="AN"></span>
       <span class="data_location" data-name="John Doe" data-description="Dorem noloy" data-location="CZ"></span>
       <span class="data_location" data-name="William Gates" data-description="Lorem ipsum" data-location="AG"></span>
       <span class="data_location" data-name="Henry Kissinger" data-description="Nuymt calum" data-location="AN"></span>
    </div>

Upvotes: 0

Gauri Bhosle
Gauri Bhosle

Reputation: 5483

You can refer below code.

 $(document).ready(function () {
         $.each($(document).find(".data_location"), function () {
                var location = $(this).data("location");
                alert(location);
            });
            });
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<div style="display: none;">
       <span class="data_location" data-name="Joe Bloggs" data-description="Lorem ipsum" data-location="CA"></span>
       <span class="data_location" data-name="Jane Doe" data-description="Ipsom erum" data-location="AN"></span>
       <span class="data_location" data-name="John Doe" data-description="Dorem noloy" data-location="CZ"></span>
       <span class="data_location" data-name="William Gates" data-description="Lorem ipsum" data-location="AG"></span>
       <span class="data_location" data-name="Henry Kissinger" data-description="Nuymt calum" data-location="AN"></span>
    </div>

Upvotes: 0

Related Questions