Получить дочерний узел по типу или классу вместо индекса - PullRequest
Новая
       7

Получить дочерний узел по типу или классу вместо индекса

0 голосов
/ 17 мая 2018

Я пытаюсь получить конкретный дочерний узел из DOM, используя JS или jQuery. Я понял, как получить NodeList, содержащий этот узел, но документация указывает только на то, что можно получить доступ к узлам по индексу. Это кажется рискованным, так как у меня нет гарантии их заказа. 

$(".axis")[0].childNodes()

возвращает следующее NodeList [...]

​
0: <g class="tick" style="opacity: 1;" transform="translate(0,319.94835680751174)">
​
1: <g class="tick" style="opacity: 1;" transform="translate(0,237.31924882629104)">
​
2: <path class="domain" d="M0,1H0V353H0" style="fill: none; stroke: rgb(34, 34, 34); shape-rendering: crispedges;">
​
3: <text>
​
length: 4

Я сомневаюсь, что циклически проходить через каждый узел и проверять его HTML на класс или тип - это лучший способ. Я пытался $(".axis")[0].childNodes.getElementsByClass("domain"), но это возвращает TypeError: $(...)[0].childNodes.getElementsByClass is not a function.

Являются ли они более прямым способом доступа к ним по типу или классу?

1 Ответ

0 голосов
/ 17 мая 2018

В jQuery есть два метода: find () и children () .

Они оба возвращают элементы, которые соответствуют селектору-потомку родительского узла, однако children() будет искать только первый уровень дочерних потомков, тогда как find() будет перебирать все дочерние элементы - очевидно, children() - предпочтительный метод для более быстрого время выполнения.

Пример 

$('#parent').find('.foo').addClass('bar');

добавит класс bar к каждому элементу в элементе #parent, который имеет имя класса foo

тогда 

$('#parent').children('.foo').addClass('bar');

вернет только самый внешний элемент .foo из этой структуры DOM: 

<div id="parent">
  <p class="foo"></p>
  <div>
    <p class="foo"></p>
  </div>
</div>
...