jQuery的n個子

Question

我努力的目標類show-grid

的另一個DIV內的每個格中的每個格我目前使用的這一點，但它不工作。我使用https://github.com/liabru/jquery-match-height獲得show-grid類的每一個專區內的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

要定位與.show-grid類的div內的每個格只使用jQuery選擇$('.show-grid div')。

從那裏，你可以通過應用CSS都是一樣的高度使他們：

.show-grid div { 
    height: 10px; 
} 

Answer 2

我不能完全肯定，如果這是你需要什麼，但我已經展示了一種用香草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>

}

}