3

from jquery docs an element is hidden when : 祖先要素が非表示になっているため、要素はページに表示されません。

非表示の div と内部の段落があり、非表示または表示にすることができます

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
</div>

したがって、ラッパーが非表示になっているため、選択 $(".myclass:visible") は失敗します

ラッパー内に要素が表示されているかどうかを確認してカウントする他の方法はありますか。

たとえば、要素にクラス myclass と css display:none があるかどうかを確認します。私が推測する 1 つの解決策ですが、私からの試行は失敗します。

どんな助けでも大歓迎

4

4 に答える 4

7

私が見る唯一の方法は、(インライン スタイルではなく) 要素を非表示にするカスタム クラスを追加することです。

.hidden {
    display: none;
}

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass hidden"text</p> 
    <p class="myclass" >text</p> 
    <p class="myclass hidden">text</p> 
    <p class="myclass" >text</p> 
</div>

次に、「目に見える」ものを で数えることができます$('.myclass:not(.hidden)').length。

アップデート：

displayプロパティが ではない要素を実際に見つけるだけでよい場合は、次のようnoneに.filter()できます。

var count = $('.myclass').filter(function() {
    return this.style.display !== "none";    
}).length;

もちろん、一部の要素がdisplay:noneUI タブ プラグインではなくユーザーによって設定されている場合、これは機能しません。しかし、あなたの状況ではそれで十分かもしれません。

于 2011-02-16T10:59:02.450 に答える
2

私はフェリックスの方法を使用します。

しかし、マークアップを変更せずに代替手段が本当に必要な場合は、これでうまくいくはずです。

var wrapper, visibles;
wrapper = $("#wrapper");
wrapper.show();
visibles = wrapper.find(":visible");
wrapper.hide();

実際の例

そこにyieldがない限り（setTimeoutなど）、ラッパーが表示されている短い間隔でブラウザが実際に何も表示しない可能性が高くなります。

于 2011-02-16T11:04:48.727 に答える
0

次のように、表示プロパティを直接確認できます。

$('#wrapper p.myclass').each(function(){
 alert($(this).attr('style'));
}

style 属性の値が表示されます。

あなたもできる

this.style.display表示プロパティに直接アクセスします。

于 2011-02-16T11:05:57.980 に答える
-1

試す：

alert ( $("#wrapper .myclass:visible").size());

私が試したときの結果は2でした:)

于 2011-02-16T11:02:40.540 に答える