从DOM访问元素

Question

我使用jquery动态创建元素。这是我的代码function showArticles(res) {    var output = '';    res.articles.forEach(function (item) {      output +=        '<div class="col-12 col-lg-4 item-article" data-name="'+ item.author +'>'+          '<p>' + item.description + '</p>'          +        '</div>'      });    articleWrapper.append(output);我想访问该data-name属性var itemArticle = $('.item-article').attr("data-type");console.log(itemArticle)退货undefined。如何访问data-name属性，为什么会发生这种情况？

Answer 1

您可以使用 var itemArticle = $('.item-article').data("name");

Answer 2

您得到错误的属性。

之后showArticles被调用时，你可以这样做：

var itemArticle = $('.item-article').attr("data-name");

// Or

var itemArticle = $('.item-article').data("name");

Answer 3

您尝试使用的代码是jQuery代码。如果要使用它，则需要导入jQuery库。因为此问题未用jQuery标记，所以我假设您要使用普通的javascript。

您可以使用此函数querySelectorAll()来获取匹配的元素。循环遍历这些元素，然后运行getAttribute()函数以获取属性值。

var items = document.querySelectorAll('.item-article');

items.forEach((item) => {

  var dataName = item.getAttribute('data-name');

});