がカスタムjQueryを使って属性値を取得しようとするとjqueryの

Question

と属性値を取得し、その後、クラス

<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="https://google.com"></div> 

<p class="data-author"></p> 
<p class="data-cat"></p> 
<a href="#"></a> 

$("#data").each(function() { 
    var author = $(this).attr("data-author"); 
    var cat = $(this).attr("data-cat"); 
}); 

$(document).ready(function() { 
    $(".data-author").append(author); 
    $(".data-cat").append(cat); 
}); 

を持つ要素に追加し、私は、コード内で間違った何かをやっていますか？ここにサンプルがありますcodepen

Answer 1

変数は異なるスコープになるのでundefinedになりますので、両方のアクションをドキュメントレディハンドラ内で実行してください。 idが一意であるため、同じidの複数の要素がある場合、最初の要素のみが選択されるため、each()は完全に不要です。

$(document).ready(function() { 
    // cache the element 
    var $ele = $("#data"); 

    // append contents 
    $(".data-author").append($ele.attr("data-author")); 
    $(".data-cat").append($ele.attr("data-cat")); 
}); 

---

UPDATE：あなたものの、カスタムdata-*属性値を取得するためにdata()メソッドを使用します。

$(".data-author").append($ele.data("author")); 
$(".data-cat").append($ele.data("cat")); 

Answer 2

異なるスコープ内の各ループ

$(document).ready(function() { 
$(".data-author").append($("#data").attr("data-author")); 
$(".data-cat").append($("#data").attr("data-cat")); 
});