如何使用Javascript为所有事件查找特定的nth-child（）元素

Question

I am trying to do this:

when clicked on fruitSort container show the origin element (every third div of the fruitSort container, for now in red ), and I want to do this for all fruitSort containers, if user clicks fruitSort, show fruitOrigin.

(for obvious reasons I don't hide fruitOrigin yet )

I can't seem to find out how to target these nth-children properly in javascript.

I want to learn pure javascript so please no Jquery. thanks a lot.

 var fruit = document.getElementsByClassName('fruitSort'); for(var i = 0; i < fruit.length; i++) { fruit[i].addEventListener("click", showOrigin, false); } function showOrigin() { console.log("clicked"); // show every fruitSort div:nth-child(3) } 

 .fruitSort {padding:15px; border:1px solid grey;} .fruitSort div:nth-child(3) {color:tomato;} 

 <div class="fruits"> <!-- NB! No ID's present, only classes so adding an id to .fruitOrigin is not an option --> <div class="fruitSort"> <div>1</div> <div>Banana</div> <div>Latin America</div> </div> <div class="fruitSort"> <div>2</div> <div>Apple</div> <div>The Netherlands</div> </div> <div class="fruitSort"> <div>3</div> <div>Kiwi</div> <div>New Zealand</div> </div> </div> 

Answer 1

You can use the document.querySelectorAll, it's basically a selector that you can select using CSS selectors..

 var fruit = document.getElementsByClassName('fruitSort'); for(var i = 0; i < fruit.length; i++) { fruit[i].addEventListener("click", showAll, false); } function showAll(el) { //console.log("clicked"); // show every fruitSort div:nth-child(3) console.log("this = " + this.querySelector(".fruitOrigin").innerText); var found = document.querySelectorAll(".fruitSort div:nth-child(3)"); for (var x of found) console.log(x.innerText); } 

 .fruitSort {padding:15px; border:1px solid grey;} .fruitSort div:nth-child(3) {color:tomato;} 

 <div class="fruits"> <!-- NB! No ID's present, only classes so adding an id to .fruitOrigin is not an option --> <div class="fruitSort"> <div class="fruitID">1</div> <div class="fruitName">Banana</div> <div class="fruitOrigin">Latin America</div> </div> <div class="fruitSort"> <div class="fruitID">2</div> <div class="fruitName">Apple</div> <div class="fruitOrigin">The Netherlands</div> </div> <div class="fruitSort"> <div class="fruitID">3</div> <div class="fruitName">Kiwi</div> <div class="fruitOrigin">New Zealand</div> </div> </div> 

Answer 2

You can find children with class fruitOrigin and show them:

 var handler = function() { var origins = this.getElementsByClassName('fruitOrigin') for (var i = 0; i < origins.length; i++) { origins[i].style.display = 'block'; } } var fruit = document.getElementsByClassName('fruitSort'); for (var i = 0; i < fruit.length; i++) { fruit[i].addEventListener('click', handler, false); } 

 .fruitSort {padding:15px; border:1px solid grey;} .fruitSort div:nth-child(3) {color:tomato;} .fruitOrigin {display:none;} 

 <div class="fruits"> <!-- NB! No ID's present, only classes so adding an id to .fruitOrigin is not an option --> <div class="fruitSort"> <div class="fruitID">1</div> <div class="fruitName">Banana</div> <div class="fruitOrigin">Latin America</div> </div> <div class="fruitSort"> <div class="fruitID">2</div> <div class="fruitName">Apple</div> <div class="fruitOrigin">The Netherlands</div> </div> <div class="fruitSort"> <div class="fruitID">3</div> <div class="fruitName">Kiwi</div> <div class="fruitOrigin">New Zealand</div> </div> </div>