javascript - jQuery 第 n 个子项中的每个 div

Question

我正在尝试将每个 div 定位到 show-grid 类的另一个 div 中

我目前正在使用它，但它不起作用。我正在使用 https://github.com/liabru/jquery-match-height使 show-grid 类的每个 div 中的 div 的高度相同

div.show-grid:nth-child(1) div
div.show-grid:nth-child(2) div
...

<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>

Answer 1

我不完全确定这是否是您需要的，但我已经展示了一种使用 vanilla JS 来选择“show-grid”div 的第二个子元素的方法(您可以调整以获得您需要的子元素).从那里您可以根据需要设置高度:

var outerDivs = document.getElementsByClassName('show-grid');
var heightIWant = 100;

for ( var i = 0; i < outerDivs.length; i++ ) {

    // every 2nd child (as an example)
    if ( i % 2 == 0) {

      var innerDivs = outerDivs[i].getElementsByTagName('div');
      for ( var j = 0; j < innerDivs.length; j++ ) {
        innerDivs[j].style.height = heightIWant + 'px';
      }

  } 
}

<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>
<div class="show-grid">
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
  <a href="">
    <div></div>
  </a>
</div>

}

}