Выбирайте только дочерние div, а не "внучатые" div - PullRequest
Новая
       11

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

1 голос
/ 17 октября 2019

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

<div class="all">
    <div class="resource"> //lets call this resource "resource 1"
        <div class="method"> // this method as "method 1"
        <div class="method"> // this method as "method 2"
        <div class="resource"> // this resource as "resource 2"
            <div class="method"> // this method as "method 3"
    <div class="resource">
    <div class="resource">
...

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

Мне бы пришлось выбрать только методы внутри ресурса 1.

Что я пробовал:

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

    resource1.querySelectorAll(".resource > .method")

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

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

resource1.getElementsByClassName("method");

снова, мне нужно было, чтобы он возвращал мне только методы, расположенные непосредственно под document.getElementsByClassName ("resource") [0] (то естьравно ресурсу 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

Ответы [ 4 ]

0 голосов
/ 17 октября 2019 
document.querySelectorAll('.all > .resource:first-child > .method')

Это гарантирует, что выбранные <div> s являются прямыми потомками (не внуками) элемента <div class="all">, и будут выбраны только методы первого ресурса.

0 голосов
/ 17 октября 2019

Для проверки читается только div верхнего уровня ... замените 

resource1.querySelectorAll(".resource > .method")

на 

resource1.querySelectorAll(".all > .resource > .method")

. Вот примерная скрипка.

0 голосов
/ 17 октября 2019

Первый селектор действительно близко. Вы извлекаете все методы, которые находятся непосредственно под любым ресурсом. Конечно, вы хотите получить все методы из одного конкретного ресурса.

Я не уверен, какой ресурс вы хотите выбрать, но в случае, если вы хотите первый, вы можете использовать следующий код:

(обычный javascript) 

document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
  el.classList.add("selected");
});


$('.resource:first-child > .method').addClass("selected");

(jquery)

Демонстрация: https://jsfiddle.net/2bpfuge4/1/

(function() {
  document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
    el.classList.add("selected");
  });
})();
.resource,
.method {
  width: 100%;
  height: 50px;
  display: inline-block;
}

.resource {
  background-color: green;
  padding-left: 50px;
}

.method {
  background-color: red;
}

.selected {
  background-color: yellow;
}
<div class="all">
  <div class="resource">
    <div class="method"></div>
    <div class="method"></div>
    <div class="resource">
      <div class="method"></div>
    </div>
  </div>
  <div class="resource">
    <div class="method"></div>
    <div class="method"></div>
    <div class="resource">
      <div class="method"></div>
    </div>
  </div>
</div>

Возможно, вам придется выбрать другой элемент. Вы можете использовать: nth-child, чтобы выбрать конкретный элемент, или использовать несколько> селекторов, чтобы пройти по дереву элементов.

0 голосов
/ 17 октября 2019

Вам нужен объект Jquery, чтобы применить поиск: 

$($('.primaryResource')[0]).find('.method')

Выполнить

...