jQueryで最もエキサイティングなことの1つは、セレクターエンジンです。 ほとんどのセレクターはCSSのセレクターと同じ式を使用するため、jQueryのセレクターを使用したDOM要素へのアクセスは非常に簡単なタスクになります。 これは、プログラマーではなくWebデザイナーが簡単に学ぶことができるものです。

この記事は、任意のセレクターを作成するための演習であり、独自のセレクターを作成するためのガイドとして使用できます。

私は何を達成したかったのですか？

最初は、コレクションの3つごとのアイテムを取得する必要がありました。 （3番目の要素ごとに個別のスタイルを適用するつもりでした）。 この問題を解決するために簡単なスクリプトを作成しようとしましたが、セレクターとして実行できない理由を考えました。

jQueryで「カスタム」セレクターを作成することは、それほど複雑な問題ではありません。 このテーマに関する優れた記事があります。

だから、私の目標は、特定のステップで要素を選択することでした、または場合によっては、最初からではなくn番目の要素から選択を開始する必要がありました...

最終的なコードは次のとおりです。

jQuery.expr[ ':' ].step = function (node,index,meta){

var $index = index;

var $meta = meta[3].toString().split( ',' );

var $step = parseInt($meta[0]);

var $start = ($meta.length > 1) ? $meta[1] : 0;

if ($start != 0) $start -= 1;

return ( ( ($index-$start) / $step ) == Math.floor( ( ($index-$start) / $step ) ) && ( ($index-$start) >= 0 ) );

};

順を追って説明しましょう

このベクターの使用を開始するには、jQueryとjquery.step.jsファイルを含める必要があります。これらのファイルは、 こちらからダウンロードできます 。

<script type= "text/javascript" src= "jquery.js" ></script>

<script type= "text/javascript" src= "jquery.step.js" ></script>

ステップセレクターは、通常のjQueryメソッドを使用して要素をフェッチします。 3つごとのアイテムを取得する例を次に示します。

$( 'ul#one li:step(3)' ).css( 'clear' , 'left' );

前述のように、このセレクターは特定の要素から選択するために使用できます。 5番目から3番目ごとに要素を選択する場合、次のようになります。

$( 'ul#two li:step(3,5)' ).addClass( 'alt' );

最初のパラメーター3はステップを示し、2番目のパラメーター5はサンプルの開始点を示します。 パラメーターはコンマで区切られます。

実用化

float = leftのサムネイルがあるギャラリーがあり、4番目のサムネイルごとにラップをリセットする場合。 または、視覚的なグループ化のためにリストの10番目の要素ごとに特別なクラスを適用します。 または、5つのニュースごとに広告を挿入できますが、最初の広告の前には挿入できません...など。

重要な注意事項

解決できなかった問題がいくつかあります。 セレクターにクラスが含まれていると、セレクターが正しく機能しませんでした。 このセレクターにはいくつかの問題があります。

$( 'ul.one li:step(3)' ).css( 'clear' , 'left' );



あなたが解決策を持っている場合-それを共有し、私たちはすべてあなたに感謝します。

翻訳者から：例が検証されている-すべてが正常に機能しているように見える-著者が完全に理解していない問題。

コメントからオリジナルへ：

jQuery自体には既にシンプルなセレクターがあります。

api.jquery.com/nth-child-selector

インデントが必要な場合は、等値+インデントで貼り付けてください。



回答：この記事は、任意のセレクターを作成する例にすぎません。 ありがとう