divをJQueryでトグルした後リロードCSSを

Question

CodepenにあるTim Robert-Fitzgeraldのフィルタを使ってdivの表示を切り替えることは本当にきれいで簡単な方法ですが、私のサイトではうまく機能しますが、ニーズ。

デフォルトでは、2番目のdivの境界線を削除するnth-childセットアップがありますが、divをトグルすると2番目のdivに再適用されません。実際にはまだ適用されていますが、divはdisplay：noneに設定されているため表示されません。

divを一度切り替えてしまえば、nth-childを再計算する方法を教えてください。

var $btns = $('.btn').click(function() { 
 
    if (this.id == 'all') { 
 
    $('#parent > div').fadeIn(450); 
 
    } else { 
 
    var $el = $('.' + this.id).fadeIn(450); 
 
    $('#parent > div').not($el).hide(); 
 
    } 
 
    $btns.removeClass('active'); 
 
    $(this).addClass('active'); 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    padding: 10px; 
 
    background: #ecf0f1; 
 
    font-family: helvetica, sans-serif; 
 
    font-weight: 200; 
 
} 
 
.btn { 
 
    border: none; 
 
    background: linear-gradient(to bottom, #3498db, #2980b9); 
 
    border-radius: 3px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    padding: 5px 10px 5px 10px; 
 
    text-decoration: none; 
 
    margin: 5px; 
 
} 
 

 
.active { 
 
    background: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
} 
 
.box { 
 
    background:#2980b9; 
 
    padding: 10px; 
 
    height: 100px; 
 
    width: calc(33% - 10px); 
 
    float: left; 
 
    margin: 5px; 
 
    text-align: center; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    border:4px solid #000; 
 
} 
 

 
.box:nth-child(2) { 
 
border:none; 
 
} 
 

 
.spacer { 
 
    clear: both; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="active btn" id="all">Show All</button> 
 
<button class="btn" id="a">Show A</button> 
 
<button class="btn" id="b">Show B</button> 
 
<button class="btn" id="c">Show C</button> 
 
<button class="btn" id="d">Show D</button> 
 

 
<div class="spacer"></div> 
 

 
<div id="parent"> 
 
    <div class="box a b">A &amp; B</div> 
 
    <div class="box a">A</div> 
 
    <div class="box b">B</div> 
 
    <div class="box c">C</div> 
 
    <div class="box d">D</div> 
 
</div>

Answer 1

使用したCSSセレクタ（:nth-child(2)）は、HTML DOM要素に基づいているため、必要なものではありません。 2番目の要素はDOM内の場所を変更することはありません。

私はそこにCSSソリューションがあるとは思わないが、jQueryソリューションがある。

私はあなたのCodepenを取り、（代わりに.box:nth-child(2)の）

CSS

.box.no-border { 
    border:none; 
} 

JS

var $btns = $('.btn').click(function() { 
    if (this.id == 'all') { 
    $('#parent > div').fadeIn(450); 
    } else { 
    var $el = $('.' + this.id).fadeIn(450); 
    $('#parent > div').not($el).hide(); 
    } 
    $btns.removeClass('active'); 
    $(this).addClass('active'); 

    $('.box').removeClass('no-border'); // reinitialize 
    $('.box:visible').eq(1).addClass('no-border'); // apply the class 
}) 

修正非常にささいなことはそう、eq()方法は、0から始まるインデックスであることに注意してください.eq(1)は2番目の要素を取得します。追加：visibleは画面に表示されるものだけを表示します。

Answer 2

要素が残っているので、これはちょうど隠れて、機能していません。追加のクラスを使用してボーダーを制御する（または他のどのスタイルを使用しても構わない）ことを検討し、アクティブクラスを追加および削除するのと同じ方法でjQueryでスワップすることを検討するとよいでしょう。