jQueryのn番目の子

Question

私はクラスshow-grid

の別のdiv内の各div要素をターゲットにしようとしています内のすべてのdiv私は現在、これを使用していますが、それは動作しません。私はjQueryのセレクタ$('.show-grid div')を使用するクラス.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

同じ高さにクラスshow-gridの各div要素内のdivの高さを取得するためにhttps://github.com/liabru/jquery-match-heightを使用しています。あなたが彼らにCSSを適用することによって、すべて同じ高さにすることができそこから

：

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

Answer 2

を私は、これは何が必要であれば完全にわからないんだけど、私はバニラのJSを使用する方法を示してきました'show-grid' divの2番目の子を選択します（必要な子を得るために適応することができます）。必要に応じて、そこから高さを設定するのはあなた次第です：

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>

}

}