Question

尝试使用jQuery获取属性值，然后将其附加到具有类

的元素

<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，因此在文档就绪处理程序中执行这两个操作。虽然此处each()完全没必要，因为id是唯一的（如果有多个元素具有相同的id，那么只会选择第一个元素。）

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

更新：您虽然使用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"));
});

使用jquery获取自定义属性值

2 个答案: