console.log(e.target.closest("[^data]"));
Собственно как найти первого родителя у которого атрибут начинается с data и взять его значение?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуconsole.log(e.target.closest("[^data]"));
Собственно как найти первого родителя у которого атрибут начинается с data и взять его значение?
Если не ошибаюсь, с CSS-селекторами такого не достичь: есть возможность искать по начальной части ЗНАЧЕНИЯ определённого атрибута, но не по начальной части ИМЕНИ атрибута. Но можно использовать ХPath:
const element = document.querySelector('i');
const closest = document.evaluate(
'./ancestor-or-self::*[@*[starts-with(name(), "data")]][1]',
element,
null, XPathResult.FIRST_ORDERED_NODE_TYPE, null,
).singleNodeValue;
console.log(closest.tagName); // 'P'
<div data-test1="foo">
<p data-test2="bar">
<i>abc</i>
</p>
</div>
Имейте в виду, что, если у самого элемента тоже есть подходящий атрибут, будет выбран сам элемент, как и в случае с методом .closest()
. Если нужно выбирать только из предков, используйте ancestor::
вместо ancestor-or-self::
.
Как вариант, вы можете пройтись по родительским элементам, пока не найдете нужный. Список data
атрибутов находится в свойстве dataset
элемента.
var el = document.querySelector("#el");
var current_el = el;
var found = null;
while(current_el && current_el != document.body){
current_el = current_el.parentNode;
if(Object.keys(current_el.dataset).length > 0){
found = current_el;
break;
}
}
if(found){
console.log(found.dataset);
found.style.borderColor = "blue";
}
div{
padding:1em;
border:4px solid #aaa;
}
<div>
<div data-somedata="somevalue">
<div>
<div id="el"></div>
</div>
</div>
</div>
data
. То, что этих атрибутов может быть больше одного, ему, возможно, в голову не приходит.data-*
атрибуты подразумеваются. Решил уточнить.