使用data attr value获取其他data attr值

Use data attr value to get other data attr value

本文关键字：attr data 其他 value 使用 获取      更新时间：2023-09-26

情况如下:

如果有一堆带有data属性的图片:data-selected和data-id

<img src="" alt="" data-id="2" title="" class="selected" data-selected="1">
<img src="" alt="" data-id="4" title=""  data-selected="0">
<img src="" alt="" data-id="5" title="" class="selected" data-selected="1">
<img src="" alt="" data-id="7" title=""  data-selected="0">

我想获取所有data-selected="1"的元素

我试着这样做:

var interests = document.querySelectorAll("[data-selected='1']");

一旦元素被收集到一个变量中，我想获得这些元素的所有数据id值。

比如

for (var i = 0; i < interest.length; ++i){
        var id += interest[i].attr("data-id") . ";";
    }

谁知道一个更好的角度如何实现这一点?

提前感谢。

——在提到的话题中似乎找不到答案

querySelectorAll, getElementsByClassName和其他getElementsBy*方法返回什么?

Array.apply(null, document.querySelectorAll("[data-selected='1']")).
  forEach(function (e) { console.log(e.getAttribute('data-id')); });
<div data-selected='1' data-id="sel1"></div>
<div data-selected='1' data-id="sel2"></div>
<div data-selected='1' data-id="sel3"></div>
<div data-selected='1' data-id="sel4"></div>
<div data-selected='1' data-id="sel5"></div>
<div data-selected='1' data-id="sel6"></div>
<!-- should not get next -->
<div data-selected='2' data-id="sel7"></div>

相关文章：