Блог

Главная - Вопросы по программированию - Поиск элементов похожей иерархии с помощью JavaScript (для веб-очистки)

Поиск элементов похожей иерархии с помощью JavaScript (для веб-очистки)

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

Например, когда я выбираю один из элементов p.item-title ниже, должны быть найдены все элементы p.item-title (не по имени класса). Также, когда я выбираю один из элементов таблицы ниже, должны быть найдены все похожие таблицы. Мне это нужно для веб-очистки.

 <div>
  <div>
    <p class="item-title">...</p>
    <table>...</table>
  </div>
</div>
<div>
  <div>
    <p class="item-title">...</p>
    <table>...</table>
  </div>
</div>

Метод siblings() от jQuery похож по концепции, но он находит похожие элементы под одним и тем же родительским узлом. Существует ли какой-либо метод или библиотека для поиска похожих элементов из разных родительских узлов?

Ответ №1:

Просто сделайте querySelectorAll по нужному пути (иерархии):

 var allElements = document.querySelectorAll("div > div > p");
allElements.forEach(p => console.log(p));  
 <div>
  <div>
    <p class="item-title">Text 1</p>
    <table>...</table>
  </div>
</div>
<div>
  <div>
    <p class="item-title">Text 2</p>
    <table>...</table>
  </div>
</div>

Комментарии:

1. Извините. Я хотел бы найти похожие элементы, НЕ используя имя класса. Я отредактировал свой вопрос, чтобы прояснить это.

2. Отредактировал мой ответ @rhythm

Ответ №2:

Попробуйте это:

 jQuery.fn.addEvent = function(type, handler) {
    this.bind(type, {'selector': this.selector}, handler);
};

$(document).ready(function() {
    $('.item-title').addEvent('click', function(event) {
        console.log(event.data.selector);
        let elements = document.querySelectorAll(event.data.selector);
                elements.forEach(e => console.log(e));
    });
});

Ответ №3:

Благодаря Джеку я смог создать работающий скрипт.

 // tags only selector (I need to improve depending on the use case)
function getSelector(element){
  var tagNames = [];
  while (element.parentNode){
      tagNames.unshift(element.tagName);
      element = element.parentNode;
  }
  return tagNames.join(" > ");
}

function getSimilarElements(element) {
  return document.querySelectorAll(element);
}