javascript — выбирайте только дочерние элементы div, а не элементы типа «внучка»

Выбирайте только дочерние div, а не «внучатые» div

У меня есть функция, которая рекурсивно добавляет больше div на страницу HTML при взаимодействии с пользователем. Эти элементы представляют объекты, а входные данные представляют свойства этих объектов. Проблема в том, что эти объекты вложены друг в друга — мне нужна помощь, когда я выбираю только информацию дочернего элемента div. Я постараюсь проиллюстрировать проблему:

 {amp}lt;div class="all"{amp}gt; {amp}lt;div class="resource"{amp}gt; //lets call this resource "resource 1" {amp}lt;div class="method"{amp}gt; // this method as "method 1" {amp}lt;div class="method"{amp}gt; // this method as "method 2" {amp}lt;div class="resource"{amp}gt; // this resource as "resource 2" {amp}lt;div class="method"{amp}gt; // this method as "method 3" {amp}lt;div class="resource"{amp}gt; {amp}lt;div class="resource"{amp}gt; ... 

У нас есть этот div «ресурс», внутри которого можно найти другой «ресурс» или «метод». Теперь проблема в том, что я должен выбирать только дочерние элементы в циклах. Пример:

Я должен был бы выбрать только методы внутри ресурса 1.

  1. Выбор его с помощью селекторов CSS:

    resource1.querySelectorAll(".resource {amp}gt; .method")

но это возвращает мне все три метода (и мне нужно, чтобы он возвращал только 2 метода, вложенных непосредственно под ним). Я полагаю, что это происходит потому, что этот селектор ищет все методы «div» div «resouce» div (и поскольку все эти вложенные div имеют одинаковые имена классов, он не может отличить их друг от друга).

  1. Выбор его с помощью выбора HTML. например:

    resource1.getElementsByClassName("method");

опять же, мне нужно, чтобы он возвращал мне только методы, расположенные непосредственно под document.getElementsByClassName («resource») [0] (то есть равен ресурсу 1), но вместо этого он возвращает мне не только методы, расположенные непосредственно под ним, но и все методы, найденные в ресурсах внутри ресурса 1.

  1. Используя Jquery: в поисках более возможных решений я нашел следующую строку Jquery:

$('.resource').find('.method').first().siblings('.method').addBack().show()

но я считаю, что это не работает для моего случая. Для этого я сделал так, чтобы все первичные ресурсы (div-ы «resource», которые являются дочерними по отношению к другим «resource»), имели className = «primaryResource». так что:

 $('.primaryResource') //returns me all the primary resource divs. This works as intended. $('.primaryResource')[0] //then returns me the first primary div, but $('.primaryResource')[0].find('.method') or $('.primaryResource')[0].find('.resource') // does not return me anyhting, instead it catches Uncaught TypeError: $(...)[0].find is not a function 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector