在 JavaScript 中返回 DATA ATTR

Question

此代码返回 html 代码中li的所有元素。 例如：

<li data="2" class="produkt_w_koszyku"><b>Audi A6</b> <span class="cena_w_koszyku">199000 zł</span><span style="float: right; margin-right: 30px;" class="deleteitembasket"><i class="fas fa-times"></i></span></li><li data="3" class="produkt_w_koszyku"><b>BMW i8</b> <span class="cena_w_koszyku">122 zł</span><span style="float: right; margin-right: 30px;" class="deleteitembasket"><i class="fas fa-times"></i></span></li>

我希望他将数据属性的值返回给我。 所以：2, 3.我该如何更改此设置？

var $ul = $(this).parents('ul');
localStorage.setItem('item_id', $ul.html());

Answer 1

您希望遍历li元素并提取数据属性的值。上面的评论提供了您需要的内容，但总结一下：

// you may need a more specific selector, but this works for your html snippet
const dataAttrs = $("li").map(function(){ 
return $(this).attr('data'); 
}).get().join(',');
// display your data
console.log(dataAttrs);

此外，最好遵循关于data-*属性的标准智慧，而不是简单地使用data做一些事情，例如data-id、data-data或其他什么。请参阅 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes。

Answer 2

$("li.produkt_w_koszyku").map(function(){ return this.getAttribute('data'); }).get().join(',')

选择所有元素，将所需的部分映射到数组中，然后用逗号连接它们。 您可以使用getAttribute()从 DOM 元素中获取属性。

Answer 3

您需要在数据保存项目前面加上数据 - 例如数据数据，数据类，数据-...如下

<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>

在 JavaScript 中读取这些属性的值也非常简单。您可以使用getAttribute((及其完整的HTML名称来读取它们，但该标准定义了一种更简单的方法：可以通过数据集属性读出的DOMStringMap。

若要通过数据集对象获取数据属性，请按属性名称中 data- 之后的部分获取属性(请注意，破折号将转换为 camelCase(。

var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"