JQuery / JS ES5 - найти частичное имя атрибута данных - PullRequest
Новая
       54

JQuery / JS ES5 - найти частичное имя атрибута данных

0 голосов
/ 19 февраля 2019

У меня есть обертка с двумя случайно введенными видами баннеров на сайте - по одному за раз - единственное отличие состоит в том, что один вид использует data-abcde-zoneid="10", а второй - нет.Я должен выбрать те, которые не содержат data-abcde-zoneid="10", где abcde - случайная строка, и сделать с ней некоторые действия.

Поиск только по значению или добавление класса к этому элементу невозможно.Единственное решение - найти элемент, который содержит -zoneid="10" или напротив него.Я не могу изменить внедренный html для баннеров.

Мне известно о поиске имени класса или значения атрибута, как в jQuery: Поиск частичного имени класса , и я пытался использовать их, чтобы найтирешение, но без результата.

1 Ответ

0 голосов
/ 19 февраля 2019

Несмотря на то, что есть дубликаты, они были очень многословны, поэтому я решил опубликовать несколько более коротких версий:

Вы можете фильтровать - если вам нужно, измените zoneid и value на vars и оберните в функцию:

jQuery с ES6 скрипкой 

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