Question

我在不同的网页上有以下<img>元素。如何使用javascript从所有data-uuid属性中获取所有属性？

如果只有1个<img>元素或者有超过1个元素，它应该能够处理。

Page foo：

$('[data-uuid]').on('click', function() {
 alert($(this).attr('data-uuid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://placeimg.com/200/200/animals' data-uuid='123'>
    <img src='https://placeimg.com/200/200/animals?t=1526063181645' data-uuid='456'>
    <img src='https://placeimg.com/200/200/animals?t=1526063190252' data-uuid='789'>

页面栏：

<img src='some-url-5' data-uuid=157>

Answer 1

querySelectorAll^MDN和Attribute selector：

let uuids = [...document.querySelectorAll("[data-uuid]")].map(el => 
    el.dataset.uuid
);

console.log( uuids )

<img src='some-url' data-uuid=123>
<img src='some-url1' data-uuid=456>
<img src='some-url2' data-uuid=789>

jQuery版本：

var uuids = $("[data-uuid]").get().map(function(el) {
  return el.getAttribute("data-uuid");
});

console.log( uuids )

<img src='some-url' data-uuid=123>
<img src='some-url1' data-uuid=456>
<img src='some-url2' data-uuid=789>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

你只需要查找所有具有data-uuid属性的img

  document.querySelectorAll("img[data-uuid]");

类似这样的事情

如何从Id获取子字符串？

2 个答案: