3

チェックボックスが適用されたフィルターを使用してページ上のアイテムを非表示にすることで機能するjavascript（jQuery）ページネーションシステムがあります。正常に動作しますが、現在、この動的な結果セットをページ分割しようとしているため、特定の範囲外のすべてのアイテムを非表示にしたいと考えています。

jQuery スライス関数はこれに適しているように見えますが、範囲内のすべてのアイテムを選択するだけです。私がやりたいことは、その逆です。範囲外のアイテムをすべて選択したい。

HTML: 
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>​

jQuery:
$(function(){
    $('li').slice(3,6).css('background','#f00'); 
});​

私はフィドルをまとめました：http://jsfiddle.net/SLuXz/1/ - 私がやりたいのは、アイテム1、2、3、7、8、9、および10を赤で表示することです。2 つのスライス (0 ～ 3 および 7 ～ 10) でこれを実行できることはわかっていますが、「not」または別のコア関数などを使用してそれを行うより適切な方法があるかどうか疑問に思いました。

ご指摘ありがとうございます。

4

3 に答える 3

2

このように .not() を使用できます

$(function(){
    $('li').not($('li').slice(3,6)).css('background','#f00'); 
});​

フィドル

于 2012-10-25T13:51:07.950 に答える
2

これにも使用できます.filter：

$(function(){
    $("li").filter(function(i) { 
        return i < 3 || i > 5;
    }).css(...);
});

また

$(function(){
    $("li").filter(":lt(3),:gt(5)").css(...);
});

または（おそらく効率が悪い）

$(function(){
    $("li:lt(3),li:gt(5)").css(...);
});

http://jsfiddle.net/CYVPh/1/

于 2012-10-25T14:10:36.903 に答える
2

パフォーマンスはすべての人にとって重要であるため、Dan の回答は、Kevin B の回答を使用するよりも約 3 倍遅いため、受け入れられた回答ではありません。

このコードを実行すると

var Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //How Dan's answer suggests to do this
    var e = $('.elem').not($('.elem').slice(0,99));
}
var Finish = new Date().getTime();
console.log('Using selector filter',Finish-Start);

var Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //A better way to do Dan's answer, but still twice as slow 
    var o = $('.elem');
    var e = o.not(o.slice(0,99));
}
var Finish = new Date().getTime();
console.log('Using selector filter',Finish-Start);

Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //The fastest method
    var e = $('.elem').filter(function(i) { 
        return i < 0 || i > 99;
    });
}
Finish = new Date().getTime();
console.log('Using object filter',Finish-Start);

コンソールを見ると、次の出力が得られます。

セレクタ フィルタ 989 の使用

セレクターフィルターの使用 683

オブジェクト フィルタの使用 349

これは、データ使用量が非常に少ない場合はそれほど問題にならないかもしれませんが、かなりの量になる可能性のあるテーブル行をチェックしている私の場合、これは非常に重要です.

于 2015-03-26T15:53:35.430 に答える