66

それでは、項目 1 ～ 4 から始めます。

<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>

次に、いくつかの入力チェックボックスがあります。

<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />

基本的に、divを表示および非表示にするjQueryがあります。これで、これらの div (チェックボックスごとに 1 つ) を反復処理し、別の基準に基づいて表示/非表示を切り替える別の関数ができました。しかし、すでに非表示になっている div を再び表示したくありません。

$(".someDiv").each(function(){
  if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  };

この例では、残っている唯一の div は最後の div である必要があります。残念ながら、このコードでは 2 番目と 4 番目の div が表示されます。

このコードは、これから適用、追加するすべてのフィルターの非常に基本的な例です。

4

4 に答える 4

109

:visibleセレクターを使用して、可視のみを検索できます。

$(".someDiv:visible").each(....);

.not()セレクターを使用して、非表示のみを検索できます。

$(".someDiv").not(":visible").each(....);

この1行でコード内で同じ操作を実行できると思います。

$(".someDiv").hide().find(".regular").show();

すべてを見つけて非表示にしてから、クラス.someDivのあるものを見つけて表示します。.regular

于 2013-05-28T02:26:57.443 に答える
12

セレクターを使用して、表示されているもの:visibleを選択でき.someDivます。

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

これは、連鎖を利用した別の面白い方法です:)そしてそれを単一行にします。

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
于 2013-05-28T02:26:31.890 に答える
2

これは 2 つの方法で行うことができます。display: none要素に別のクラスを追加して css を介して非表示にするか、jquery を介して css プロパティを見つけることができます。

CSSクラス経由

html

<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>

CSS

.someDiv{
    display: block;
}

.hidden{
    display: none;
}

js

$(".someDiv").each(function(){
  if($(this).hasClass("hidden")){
    $(this).show();
  } else {
    $(this).hide();
  };

jquery経由

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});
于 2013-05-28T02:26:29.823 に答える
1

そのためにセレクターを使用して、:not()に入る前に結果をフィルタリングでき.each()ます。

$(".someDiv:not(:hidden)").each(function(){
于 2013-05-28T02:25:38.540 に答える