jQuery every div within nth child

Question

I am trying to target each div within another div of class show-grid

I am currently using this but it doesn't work. I am using https://github.com/liabru/jquery-match-height to get the height of the divs within each div of class show-grid to be the same height

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>

... *"each div"*, as in all of them? If so that's just `$('.show-grid div')` ? — adeneo, Aug 31 '17 at 19:12
You can target the child anchor tags inside the parent .show-grid a:nth-child(1) div{ rules } like this https://jsfiddle.net/x6n7Lgeo/2/ ??? — Julian Espinosa, Aug 31 '17 at 19:14
Are you wanting to set them all to the same height as the tallest, and if so is this per row? — Popnoodles, Aug 31 '17 at 19:27
BTW you can probably do this with CSS https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height/19695851 — Popnoodles, Aug 31 '17 at 19:29

score 0 · Answer 1 · answered Aug 31 '17 at 20:13

I'm not entirely sure if this is what you need, but I've shown a way to use vanilla JS to select every second child of the 'show-grid' div (you can adapt to get the child you need). From there it is up to you to set the height as required:

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>

}

jQuery every div within nth child

1 Answers1