如何使用JavaScript找到所有发生的特定nth-child()元素

Question

我正在尝试这样做：

单击Fruitsort容器上时显示原始元素(fruitsort容器的每个第三个Div，现在为红色(，我想为所有Fruitsort容器执行此操作，如果用户单击Fruitsort，请显示Fruitorigin。

(出于明显的原因，我还没有隐藏果实(

我似乎找不到如何在JavaScript中正确地瞄准这些n-Children。

我想学习纯JavaScript，所以请不要jQuery。非常感谢。

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

您可以使用document.queryselectorall，它基本上是一个选择器，您可以使用CSS选择器进行选择。

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

您可以找到患有fruitOrigin类的孩子并向他们展示：

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>