1

コンテナdiv内の少なくとも1つの子が表示されているかどうかを判断する最も簡単な方法は何ですか？div

私はこれを使用しています：

if ($this.children('div:visible').length) {...

しかし、すべての子（たくさんあります）を調べるので遅いです。

最速の方法は、最初に表示される要素が見つかるとすぐに検索を停止すると思いますが、最速の方法が優先されます:)

ところで：

私の実際の状況は、それぞれが最大100個の要素を含む約100個のマイナーコンテナーを含むメジャーコンテナーです。どのマイナーコンテナに少なくとも1つの表示要素があるかを確認したいと思います。下部の要素は、さまざまなクラスによって非表示および表示されています。

ありがとう。

4

5 に答える 5

5

このページのすべてのメソッドのJSPerf

  • 表示されるすべての要素：http：//jsperf.com/jquery-quickest-visible-check/3
  • 非表示になっているすべての要素：http：//jsperf.com/jquery-quickest-visible-check/2と
    を使用して推奨される代替方法は、最も遅い方法です。すべての要素が表示されている場合、 My/ qwertymkのメソッドはOPsソリューションよりも高速であることがわかります。ただし、すべての要素が非表示になっている場合は、元の方法が最適であるように見えます。.each().is(':visible')

編集：私の元のメソッドが高速である理由は、使用する必要が.find('>' + selector)ある場所.children()を使用したためです（これはすべての子をループし、要素がセレクターと一致するかどうかをチェックします）。

divはネイティブにサポートされているセレクターであり、テストケースには深くネストされた要素が含まれていないため、私のソリューションは高速であることがわかりました。しかし、それを正規化した後、それはqwertymksソリューションとほぼ同じに見えます。これら2つのソリューションのJSPerfは、関数呼び出しが1つ少ないため、彼のソリューションがわずかに高速であることを示しています。

このページの解決策は一般的です。以下のコードは、特定の場合（セレクターが単なるタグであるという事実など）に最適化できます。http：//jsfiddle.net/kFZJs/

:visibleネイティブCSSセレクターではないため、進行を高速化するには、セレクターを分割します。

目的のソリューションはパフォーマンスが高い必要があるため、推奨されるソリューションでは、使用するjQueryをできるだけ少なくする必要があります。これを行うには、のロジックを調べ:visibleます。

元の関数にはが含まれていますjQuery.support.reliableHiddenOffsets。子がテーブルセル（IE8-でのみ使用される）でない場合、これを安全に削除してパフォーマンスを向上させることができます。

次に、jQueryプラグインを作成します（高価ではありません）。

 (function($) {
     $.fn.hasAtLeastOneVisibleChild = function(selector) {
         var $col = this.children(selector), i, elem;
         for (i=0; i<$col.length; i++) {
             var elem = $col[i];
             if (elem.offsetWidth !== 0 || elem.offsetHeight !== 0) {
                 return true;
             }
         }
         return false;
     };
 })(jQuery);
 // Usage:
 $this.hasAtLeastOneVisibleChild('div'); // True or false
于 2012-07-10T11:55:48.917 に答える
3

1つの方法は、 each（）を使用して子を反復処理することです。しかし、表示されている要素が最後の要素である場合、これはコードと同じくらい遅くなります:)

別のオプションは、コンテナの高さを確認することです。

if($('#container').height() > 0) { ... }

子供がスペース（高さ）を取る場合、コンテナの高さも0より大きくなります。

于 2012-07-10T11:54:11.427 に答える
1

これを試してください。それぞれを反復に使用し、一致時にfalseを返すと、反復が減少する可能性があります。

isAtleastVisible = false;
$this.children('div').each(function (){
    if($(this).is(':visible') == true)
    {
       isAtleastVisible = true;
       return false;  //This will break each loop at the first visible div
    }
});

if(isAtleastVisible)
   alert("atleast one is visible");
else
   alert("None is visible");

これによりパフォーマンスが向上し、最初に表示されるdivに依存します。100回のうち最初の場合は1回の反復のみが必要であり、100回のうち100回の場合は、100回の反復が必要であり、パフォーマンスの向上はありません。

@Rob Wがis（'visible'）の動作について回答で説明したように、これは関数がこれらのパラメーターによって可視性をチェックすることを示しています。

  1. 幅と高さはゼロです
  2. style.displayはnoneです

これらのいずれかを使用して、display = noneを設定することで要素が非表示になっていると仮定して、パフォーマンスを向上させることができます。この条件は、jQueryメソッド.is（'：visible'）==trueをjavascriptステートメント.style.display=='block'に置き換えることができます。

    isAtleastVisible = false;
    $this.children('div').each(function (){
        if(this.style.display == 'block')
        {
           isAtleastVisible = true;
           return false;  //This will break each loop at the first visible div
        }
    });
于 2012-07-10T11:50:46.280 に答える
1

自分でやる：

var $container = $('#container'), $children = $container.children(), found = false;

for (var i = 0; i < $container.length; i++) {
    var elem = $children[i];
    if (!( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none")){
        found = true;
        break;
    }
}

ソース

于 2012-07-10T11:54:30.073 に答える
0 
var isVisible;
$(this.children('div')).each(function() {
    if ($(this).is(":visible")) {
        isVisible = true;
        return false;
    }
});
于 2012-07-10T11:52:16.343 に答える