Поиск по началу атрибута javascript

Question

console.log(e.target.closest("[^data]"));

Собственно как найти первого родителя у которого атрибут начинается с data и взять его значение?

Answer 1

Если не ошибаюсь, с 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::.

Answer 2

Как вариант, вы можете пройтись по родительским элементам, пока не найдете нужный. Список 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>

БЛОГ НА HUSL

Поиск по началу атрибута javascript

Ответы (2 шт):