web-dev-qa-db-ja.com

クラスとスタイルの表示を持つjquery検索要素：ブロック

次の単純なjQueryスニペットを使用して、「見つかった」要素の数（これらの要素には.highlightクラスがあります）を取得しています。

$(".highlight").length

しかし今私の問題は、いくつかの要素がstyle="display: none;"によって非表示になっていることです

では、要素の数を強調表示して表示するにはどうすればよいですか？

何かのようなもの：

$(hasClass 'highlight' AND has style 'display: block'). length ?
jquerycsshighlight
9
spiderman

：visibleを使用して、表示されている要素を取得できます。

$(".highlight:visible").length
26
Adil

1つの方法は、Adilが述べたように_:visible_ jQuery擬似セレクターを使用することです。

一般的な落とし穴は、クラス_.highlight_の要素が非表示のコンテナにネストされている場合、その要素に_display: block_が含まれていても取得できないことです。

代わりに、次のようにcss regexを使用できます：$('.highlight[style*="display: block"]')

よくある落とし穴は、ルールの記述方法を正確に知る必要があることです。 blockの前にスペースがない場合：_display:block_の代わりに_display: block_のように要素を取得することもできません。

これを克服する方法は、次のようなスタイルでblockのみを検索することです：$('.highlight[style*="block"]')

8
dimitrisk

Uは css を使用して要素にcss display="none"またはdisplay="block"

 $(".highlight").each(function(){
       if($(this).css("display")=="block"){
          //Your code here
       }
    });
3
Somnath Kharat