4

ページには 500 個以上のボタンがあります。

<button class="btn-x">test</button>

jQuery:

// #1
$('button[class*="btn-x"]').live('click', function() { }});

// #2
$('.btn-x').live('click', function() { }});

クラスまたはボタン[attr *]で直接呼び出す呼び出しは、現在効率的です。後で500を超えるボタンがあると問題が発生する可能性があるため、知りたいのですが、それらが同じ結果に影響するかどうかはわかりません。

4

5 に答える 5

9

クラス セレクターは桁違いに速くなります。

そうは言っても、live()非推奨です。jQuery 1.7+ ()`delegate()を使用している場合は、またはを使用する必要があります。on

例えば：

// < jQ 1.7
$('#staticParent').delegate('.btn-x', 'click', function() { });

// jQ 1.7+
$('#staticParent').on('click', '.btn-x', function() { });
于 2012-11-26T10:48:53.023 に答える
4

クラス属性がある場合は、属性セレクターよりもクラス セレクターを使用するほうが理にかなっています。効率性は副次的なボーナスとして提供されます。jQuery とブラウザーのネイティブ実装の両方で、関連するセマンティクスと使用法により、クラス セレクターの特別な最適化が行われます。

その上、それは属性セレクターを使用してクラス属性を処理する完全に正しい方法ではありません。あなたはおそらく意味し、そうでは[class~="btn-x"]ありません[class*="btn-x"]。これらはそれぞれ異なる方法で属性値に一致し、前者はクラス属性のセレクターにより近い動作をします。

于 2012-11-26T10:49:01.177 に答える
2

最も効率的なのは、500 ではなく 1 つのイベント ハンドラーを使用することです。

@Rory McCrossanが言ったように、イベントハンドラーを静的な親にアタッチする方が良いです:

// one event handler, recommended
$('#staticParent').on('click', '.btn-x', function() { }); 

// 500 event handlers, not recommended
$("button.btn-x").on("click", function() { ... });
于 2012-11-26T11:37:57.507 に答える
1

クラスセレクターはより高速です。クラス セレクターは id セレクターよりも遅いだけです。また、jQuery 1.7 以降では.delegate()orの代わりに使用する必要があります。あなたの場合、500 の代わりに 1 つのハンドラーをアタッチするため、重要です。.on().live().delegate().live()

于 2012-11-26T10:53:56.273 に答える
0

最も効率的なコードを探している場合は、次のようにします。

document.getElementsByClassName("btn-x");

しかし、これはIEでは機能していないと思います。IE にも適したソリューションを探している場合は、次のようにします。

function getElementsByClassName(className) {
    var a = [];
    if (document.getElementsByClassName) {
        a = document.getElementsByClassName(className);
    } else {
        var node = document.body;
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++) {
            if(re.test(els[i].className)) { a.push(els[i]); }
        }
    }
    return a;
}

( javascript document.getElementsByClassName IE との互換性から取得した最後のもの)

私はそれをテストしませんでしたが、これは jQuery を使用するよりも効率的であるはずです。

于 2012-11-26T10:56:47.040 に答える