javascript - 別のdiv内にネストされているn番目のdivのcssプロパティを変更する必要があります

Question

3x3のマトリックスで行く必要があり、各ラッパーdivボックスの後に垂直線を表示する必要があります。コードをループのリピーター制御に入れてコードからこれを生成すると、別の問題が発生し、すべてのボックスの後に垂直線が追加されます。

horizontal-line縦線が表示されないように、クラス名で3、6、9番目のdivを非表示にしようとしていました。

以下のスクリプトを変更して、内部のn番目の要素を変更する方法がわかりません

Content-areadivまたはclass

$('.content-area .horizontal-line:nth-child(6n+1)').css('display', 'none');

jsFiddleでjquerySolution（Update）の例を探しています

<div id="content-area">
    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

        <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  
</div>

Answer 1

このような？

.content-area .horizontal-line:nth-child(3n){
    display:none;
}

Answer 2

content-areaはクラスではありません。

使用する#content-area

Answer 3

$('#content-area .horizontal-line:nth-child(3n)')

そこに着く方法です