web-dev-qa-db-ja.com

jQueryを使用して、可視要素のみを検索し、非表示要素をそのままにする方法を教えてください。

それで、私はアイテム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" />

基本的に、jQueryにはdivの表示と非表示があります。これで、これらのdiv（チェックボックスごとに1つ）を反復処理し、別の基準に基づいて表示/非表示にする必要がある別の関数ができました。ただし、すでに非表示になっているdivが再び表示されるのは望ましくありません。

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

この例では、残りのdivは最後のdivのみです。残念ながら、このコードは2番目と4番目のdivを表示します。

このコードは、適用、追加などを行うすべてのフィルターの非常に基本的な例です。

javascriptjquerytoggleshow-hide
46
o_O

：visible セレクターを使用して、表示のみを検索できます。

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

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

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

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

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

すべて検索.someDivと非表示にしてから、.regularクラスとそれらを表示します。

75
Reactgular

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

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

チェーンを利用する別の面白い方法:)とそれを単一行にします。

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
10
PSL

これには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();
  }
});
2
Niche

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

$(".someDiv:not(:hidden)").each(function(){
1
Ja͢ck