JQuery/JS ES5 - найти частичное имя атрибута данных
У меня есть обертка с двумя случайно введенными типами баннеров на сайте - по одному за раз - разница только в том, что один вид использует data-abcde-zoneid = "10", а второй нет.
Мне нужно выбрать те, которые не содержат data-abcde-zoneid = "10", где abcde — случайная строка, и сделать с ней кое-что.
Поиск только по значению или добавление класса к этому элементу невозможны.
Единственное решение — найти элемент, который содержит -zoneid = "10" или напротив него.
Я не могу изменить введенный html для баннеров.
Я знаю, что нашел имя класса или значение атрибута, как в jQuery: поиск частичного имени класса, и я пытался использовать их для поиска решения, но безрезультатно.
@mplungjan Я слепой что ли? :) Я пробовал это, и везде говорят о [attribute$ = "value"] но мне нужно что-то вроде [sth$='attribute = "value" ']...
@JamesCoyle - это полезнее :)
ES6: jsfiddle.net/mplungjan/b36hdq18
Ответы 1
Хотя там есть дубликаты, они были очень подробными, поэтому я решил опубликовать несколько более коротких версий:
Вы можете фильтровать - если вам нужно, измените zoneid и значение на 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 для старых браузеров рабочий пример
$("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>
Вы можете просмотреть каждый
elementsObject.values(element.attributes)для совпадения.