如何使用Javascript查找所有出现的特定nth-child（）元素

Question

我正在尝试这样做：

当点击fruitSort容器时显示origin元素（fruitSort容器的每三个div，现在为红色），我想对所有fruitSort容器执行此操作，如果用户单击fruitSort，则显示fruitOrigin。

（出于显而易见的原因，我不能隐藏水果原产地）

我似乎无法找到如何在javascript中正确定位这些n个孩子。

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

＆＃13;

＆＃13;

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)
   
    }

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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的孩子，并向他们展示：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;