.each（）でループしている間にデータ属性を取得すると、未定義の値が返されます。

Question

私は自分のウェブページにデータを保存するために一連のツールを使用しています。

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

私はこれらの各スパンをループして、データ属性を1つ読んでいきたいと思います。以下のコンセプトコードは、常に「未定義」を返します。

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

私はこの問題が$（これ）にあると感じていますが、わかりません。誰か助けてくれますか？

Answer 1

array#each機能が正しくありません。このように変更することができます$(".data_location").each(function() {。

なぜ定義されていませんか？あなたは.But $(".data_location")アレイ法に各タイプを適用している

あなたは、コードの下に参照できる要素

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

Answer 2

の配列.itsオブジェクトではありません。

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

Answer 3

あなたの各機能が正しいこと、しかしコールバックメソッドは、要素の2つの指標のパラメータ1、及びその他を含んでいなければなりません。

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

Answer 4

$.each()ロジック内this繰り返し処理で要素を参照していないため問題があります。このパターンを使用する場合は、現在の要素であるハンドラ関数に渡される2番目のパラメータを使用する必要があります。それは$('.data_location').each(fn)を使用して、代わりにそのハンドラ関数内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>

：これを試してみてください。