Как выбрать второго ребенка элемента, не выбирая его потомков первого ребенка

Я объясню свой вопрос лучше здесь. Я хочу получить второго ребенка моего основного div, не получая детей первого ребенка.

<div id="main">
    <div id="child">
        <div id="problem"></div>
    </div>
    <div id="child"></div>
</div>

Используя ванильный JavaScript, я могу получить второй «#child» из «#main». Я не могу использовать document.getElementById ('child'), потому что у меня есть другие элементы с этим идентификатором, и я не могу изменить ни один из элементов. Я пробовал использовать document.getElementById ('main'). GetElementsByTagName ('div') [1], но затем он дает мне потомок первого div. Так что я мог бы поставить «2» вместо 1, что могло бы работать, но я постоянно добавляю и удаляю элементы внутри («#child»). Так что мне пришлось бы постоянно менять номер.

Есть ли другой способ выбрать второго ребенка? Спасибо, что нашли время помочь!

В предоставленном вами HTML нет #firstChild. Также не рекомендуется использовать один и тот же идентификатор для нескольких элементов.

Ankit Agarwal 26.10.2018 09:11

Ваша проблема заключается в дублировании id, вы никогда не должны дублировать id.

NewToJS 26.10.2018 09:13

Допустим, эти идентификаторы были классами, теперь могу ли я это сделать?

JoeTheHobo 26.10.2018 09:20
0
3
565
3

Ответы 3

document.querySelector() позволяет использовать селекторы CSS. Так что простой document.querySelector( '#main div:nth-child(2)' ) должен помочь.

Но вы все равно должны удалить любые повторяющиеся атрибуты id.

const second_child = document.querySelector( '#main *:nth-child(2)' );
console.log( second_child.innerHTML );
<div id="main">
  <div id="child1">
      first
    <div id="problem"></div>
  </div>
  <div id="child2">second</div>
</div>

Не могли бы вы объяснить мне, что именно происходит с '#main *: nth-child (2)'. Есть ли способ заменить #main переменной элемента, который у меня уже есть?

JoeTheHobo 26.10.2018 09:23

Это тот же синтаксис, с которым вы пишете код CSS. Или селекторы JQuery. developer.mozilla.org/en-US/docs/Web/API/Document/…#main выбирает элемент с идентификатором main, затем *:nth-child(2) выбирает второй элемент внутри #main, каким бы он ни был. Вы можете заменить #Main чем угодно, другим идентификатором, именем класса, именем тега. Просто прочтите querySelectorAll. Он делает все, что делают getElementById, getElementsByClassName и getElementsByTagName, но с гораздо большим количеством опций, поскольку поддерживаются почти все селекторы CSS.

Shilly 26.10.2018 09:27

Вот как вы можете получить своего дочернего элемента основного элемента. Получите все Nodes с помощью querySelectorAll и перебрать все узлы.

var childs= document.getElementById("main").querySelectorAll("div");  
//console.log(childs);
childs[0]//first
childs[1]//second
childs.forEach(function(element,idx) {
  console.log(`element ${idx+1}` );
  console.log(element)
});

function getNthChild(elementAt){
 if(elementAt>0){
  console.log(childs[elementAt-1]);
 }
}
getNthChild(1);
<div id="main">
    <div id="child">
        <div id="problem"></div>
    </div>
    <div id="child"></div>
</div>

Используйте class вместо id, потому что id должен быть уникальным. Затем используйте этот код.

const elements = document.querySelectorAll("#main > .child")

let secondElement = elements[1];
console.log("secondChild -->", secondElement.innerText)


let secondChild = Array.from(elements).find((element, index) => index == 1)
console.log("secondChild -->", secondChild.innerText)
<div id="main">
  <div class="child">
    <div id="problem">First</div>
    <div class="child">First Inner</div>
  </div>
  <div class="child">Second</div>
  <div class="child">Third</div>
  <div class="child">
  <div class="child">Second Inner</div>
  </div>
</div>

querySelectorAll

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.- MDN


"#main> .child"

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first. - MDN

Что такое <div class = "child"> </div> внутри первого дочернего div. Будет ли все это работать? Или же document.getElementsByClassName ("child") [1] выберет дочерний элемент внутри первого дочернего элемента div?

JoeTheHobo 26.10.2018 09:44

@JoeTheHobo Нет. В этом случае используйте querySelectorAll ()

mahan 26.10.2018 09:47

Некоторые полезные ссылки на документацию: - Document.querySelectorAll () - веб-API | MDN - Справочник по селекторам CSS

Chocolord 29.10.2018 09:42

Другие вопросы по теме