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

时间:2019-02-19 12:49:58

标签: jquery jquery-selectors ecmascript-5

我有一个包装器,上面有两种随机注入的横幅广告-一种是一次-唯一的区别是一种使用data-abcde-zoneid="10",而另一种则没有。 我必须选择不包含data-abcde-zoneid="10"的那些字符串,其中abcde是随机字符串,并使用它来做一些事情。

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

我知道要像在jQuery: Finding partial class name中那样查找类名或属性值,并且我尝试使用它们来查找解决方案,但没有结果。

1 个答案:

答案 0 :(得分:0)

尽管那里有重复项,但它们很冗长,所以我决定发布一些简短的版本:

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

带有ES6 fiddle

的jQuery

$("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>