Поиск элемента по частично совпадающему атрибуту

Question

При помощи

closest

Пройдемся по родителям до первого вхождения.

Вопрос в том, как выполнить тоже самое. Но до первого вхождения атрибту data-*

То есть до элемента в котором частично совпадает имя атрибута?

Answer 1

Element.attributes дает список атрибутов элемента. Можно тупо всё перебрать:

let elem = document.getElementById("elem");

attr_closest(elem, "data-").style.borderColor = "red";

function attr_closest(elem, attr) {

  while (elem) {
    for (let i = 0, a = elem.attributes; i < a.length; i++) {
      if (a[i].name.includes(attr)) return elem;
    }
    
    elem = elem.parentNode;
  }
  
  return null;
  
}

div { padding: 15px; border: 2px solid #06d }

<div data-test="aaabbbccc">
  <div id="x" class="y" data-z="z">
    <div id="elem"></div>
  </div>
</div>

Answer 2

Можно попробовать при помощи XPath:

const child = document.querySelector('#child');

const closest = document.evaluate(
  'ancestor-or-self::*[@*[starts-with(name(), "data-")]][1]',
  child, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
).singleNodeValue;

console.log(closest.outerHTML);

<div data-test='grandparent'>
  <div data-test='parent'>
    <div id='child'></div>
  </div>
</div>

БЛОГ НА HUSL

Поиск элемента по частично совпадающему атрибуту

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