jQuery ID番号範囲

Question

特定のID範囲内のアイテムをリストするクラスを追加するjQueryスクリプトを作成しようとしています。 IDの番号を使用し、IDの範囲を調整したい。

<li id="item-15">Something</li> 
<li id="item-16">Something</li> 
<li id="item-17">Something</li> 
<li id="item-18">Something</li> 
<li id="item-19">Something</li> 

16から19までの項目を追加するクラスを追加したいと思います。

jQuery('li#item-[16-19]).addClass('the-class'); 

私は本当にそれを行う方法がわかりません。たぶん.each()？特異性のために

Answer 1

これは、jquery .slice() メソッドが設計されたものです。 DOM要素の集合を表すjQueryオブジェクト、.slice（所与

） 方法は、一致 要素のサブセットから新しいjQueryオブジェクト を構築します。供給開始インデックス は、セット内の 要素の1つの位置を識別します。 endが が省略されている場合は、この後のすべての要素 が結果に含まれます。

ので

jQuery('li').slice(17,21).addClass('the-class'); 
//note Zero Based indexing. Plus it wont include the last element. 

ライブ例：

再び

$('li:gt(16):lt(19)').addClass('the-class');

を次のようにLT（）セレクタ： http://jsfiddle.net/VpNnJ/

あなたも組み合わせることができ：GT（）とライブの例：http://jsfiddle.net/cLjXE/

Answer 2

var min = 16, max = 19; 

$('li[id^=item-]').addClass(function() 
{ 
    var i = parseInt(this.id.replace('item-', ''), 10); 
    if (i >= min && i <= max) return 'the-class'; 
}); 

IDは常に連続的に増加すると、ゼロ・インデックスが作成されている場合は、おそらく、このような

$('#some-ul-id > li[id^=item-]').addClass(...); 

として、共通の親でセレクタを修飾する必要があり、あなたは、簡素化することができます：

$('#some-ul-id > li[id^=item-]').addClass(function (i) 
{ 
    if (i >= min && i <= max) return 'the-class'; 
}); 

又は、@matchew suggestsとして、.slice()使用：

$('#some-ul-id > li[id^=item-]').slice(min, max).addClass('the-class'); 

Answer 3

jQuery('li[id^="item-"]').filter(function() { 
    var number = this.id.replace(/\D+/, ''); 
    return number >= 16 && number <= 19 
}).addClass('the-class'); 

jsFiddle。

Answer 4

（単なる代替回答）
jQueryのカスタムセレクタに移動します。あなたのケースでは

はそれがあること 'でした'：

$.expr[':'].customId = function(obj){ 
    var $this = $(obj); 
    var id = $this.attr('id'); 
    var number = id.replace(/\D+/, ''); 
    if ((new RegExp(/^item-/).test(id)) && (number > 15 && number < 20)) { 
    return true; 
    } 
    return false; 
}; 

// Usage: 
$('a:customId').addClass('the-class'); 

参考：
http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html
http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm