1

jquery を使用して、パターン (3n+1) のすべての可視要素のクラスを設定しようとしていますが、予想した方法を選択していないようです。私の構文が間違っているのではないかと思っています。これが私のコードです：

$('.filterElement:visible:nth-child(3n+1)').addClass('firstInRow');

ここで提案されている方法に従っていました：

css nth-child() が可視にのみ影響するようにする

純粋なcssでこれを行う方法はありますか?

4

3 に答える 3

2

純粋なcssでこれを行う方法はありますか?

ないと思います。CSS には要素属性のセレクターがありますが、CSS プロパティ (セレクターが要素を選択した後に適用されます) のセレクターはありません。

于 2012-07-31T16:59:06.583 に答える
1

これを行う方法を見つけましたが、合理化できるようです。

CSS:

.element { margin-left: 10px; }
.element:nth-child(3n+1){ margin-left: 0; }
.element.firstInRow { margin-left:0 !important; }
.element.std { margin-left:15px !important; }

ジャバスクリプト

.filterButton.click(function(){
  $('.element').removeClass('firstInRow, std');
  if ($('.element').hasClass('.hideMe')){
    $(this).hide();
  }
  setMargins();
});

function setMargins(){
  $('.element:visible').each(function(i){
    if (i%3 == 0){
    $(this).addClass('firstInRow');
    } else {
    $(this).addClass('std');
    }
  });
}
于 2012-07-31T17:40:47.563 に答える
1

nth-child は、非表示のアイテムがあるとうまくプレイできないようです...期間。ここで例を見ることができます: http://jsfiddle.net/anAgent/FzBWn/。[テスト 2] ボタンをクリックして、非表示の値を含む行のコレクションに対してセレクターを実行します。以下の jQuery コードは、必要なものを選択する方法です。

CSS

.container {float:left;}
.row { display:block; border: 1px solid black; padding:10px; width:100px;}
.row.odd {border: 2px dotted red;background-color:yellow;}
.hidden {visibility:hidden;display:none;}

HTML

<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row hidden">I shouldn't be highlighted</div>
    <div id="4" class="row"></div>
    <div id="5" class="row">Highlighted</div>
    <div id="6" class="row"></div>
    <div id="7" class="row hidden">I shouldn't be highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row">Highlighted</div>
    <div id="10" class="row"></div>
    <div id="11" class="row"></div>
</div>
<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row "></div>
    <div id="4" class="row">Highlighted</div>
    <div id="5" class="row"></div>
    <div id="6" class="row"></div>
    <div id="7" class="row">Highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row"></div>
    <div id="10" class="row">Highlighted</div>
    <div id="11" class="row"></div>
</div>

jQuery 表示されているすべてのアイテムを取得し、それがリストの 3 番目のアイテムかどうかを調べます。

$('.row:visible').each(function(idx) {
    $(this).toggleClass('odd',(idx%3 == 0));
});
于 2012-07-31T19:05:06.300 に答える