jQueryでa番目からb番目まで範囲指定セレクタ

ltgt

a番目からb番目までの範囲を指定したいときに使うjQueryセレクタです。:lt()や:gt()を組み合わせます。CSSには存在しないセレクタですね。

:lt()
指定した数字より前に存在する同じ要素
:gt()
指定した数字より後に存在する同じ要素

(:lt(),:gt()内の数字は0から数えます)

以下、全て(1から数えて)3番目と8番目の間の要素を指定します。

例えばp要素内にあるそれぞれ1,2,3,4,5,6,7,8,9と書いたspan要素のうち4,5,6,7に該当します。


$('p').find('span:lt(7):gt(2)').css('color','red');
$('p').find('span:gt(2):lt(4)').css('color','red');

:not()を使うとこういう冗長な書き方も


$('p').find('span:not(:gt(6)):gt(2)').css('color','red');
$('p').find('span:not(:lt(3)):lt(4)').css('color','red');

.slice()も使えたり、でも最初のp要素下にあるspanにしか影響しないようです。


$('p').find('span').slice(3, 7).css('color','red');

参考

Chaining jQuery selectors :lt and :gt