jQuery/JS ES5 - 查找数据属性的部分名称

Posted 2023-05-09

【中文标题】jQuery/JS ES5 - 查找数据属性的部分名称

【英文标题】：jQuery/JS ES5 - find partial name of data attribute

【发布时间】：2019-07-12 23:42:20

【问题描述】：

我在网站上有两种随机注入的横幅的包装器 - 一次一种 - 唯一的区别是一种使用 data-abcde-zoneid="10" 而第二种不是。 我必须选择不包含data-abcde-zoneid="10" 的那些abcde 是随机字符串并用它做一些事情。

仅按值搜索或向该元素添加类是不可能的。 唯一的解决方案是找到包含-zoneid="10" 或与之相反的元素。 我无法为横幅更改注入的 html。

我知道在 jQuery: Finding partial class name 中找到类名或属性值，我尝试使用它们来寻找解决方案，但没有结果。

【问题讨论】：

您可以遍历每个elements Object.values(element.attributes) 进行匹配。

@mplungjan 我是盲人还是什么？ :) 我已经尝试过了，他们到处都在谈论 [attribute$="value"] 但我需要类似 [sth$='attribute="value" ']...

@JamesCoyle - 这更有帮助:)

jsfiddle.net/mplungjan/p2hkyuwj

ES6: jsfiddle.net/mplungjan/b36hdq18

【参考方案1】：

虽然那里有重复，但它们非常冗长，所以我决定发布一些较短的版本：

您可以过滤 - 如果需要，将 zoneid 和 value 更改为 vars 并包装在一个函数中：

带有 ES6 的 jQuery fiddle

$("div").filter(
    (_, div) => (
      Array.from(div.attributes).filter( // Array from NamedNodeMap
        (item) => item.name.indexOf("zoneid") !== -1 && item.value !== "10")
    ).length > 0
  )
  .addClass("red")

.red 
  background-color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-xxxxx-zoneid="10">
  XXXXXX 10
</div>
<div data-xxxx-something-else="z" data-xxxxx-zoneid="20">
  XXXXXX 20
</div>
<div data-yyy-zoneid="10">
  yyy 10
</div>
<div data-yyy-zoneid="30">
  yyy 30
</div>

适用于旧版浏览器的 jQuery fiddle

$("div").filter(function() 
    var namedNodeMap = this.attributes;
    for (var i = 0; i < namedNodeMap.length; i++) 
      var item = namedNodeMap.item(i);
      if (item.name.indexOf("zoneid") !== -1 && item.value !== "10") 
        return true
      
    
  )
  .addClass("red")

.red 
  background-color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-xxxxx-zoneid="10">
  XXXXXX 10
</div>
<div data-xxxx-something-else="z" data-xxxxx-zoneid="20">
  XXXXXX 20
</div>
<div data-yyy-zoneid="10">
  yyy 10
</div>
<div data-yyy-zoneid="30">
  yyy 30
</div>