jQueryのスライスとクリックイベント

Question

これはおそらく jQuery に関する非常に単純な質問ですが、ドキュメントを読んでも 10 分経っても答えられませんでした。

チェックボックスのリストがあり、セレクターを使用してそれらを取得できます 'input[type=checkbox]'. 。ユーザーが Shift キーを押しながらクリックして、チェックボックスの範囲を選択できるようにしたいと考えています。これを実現するには、リスト内のチェックボックスのインデックスを取得して、そのインデックスを次の関数に渡す必要があります。 .slice(start, end). 。ユーザーがボックスをクリックしたときにインデックスを取得するにはどうすればよいですか?

Answer 1

次のセレクターは jQuery でも機能するはずです。 input:checkbox.

その後、文字列を付けることができます :gt(index) そして :lt(index) フィルタを一緒に行うので、5 番目から 7 番目のチェックボックスが必要な場合は、次のようにします。 input:checkbox:gt(4):lt(2).

現在クリックされているチェックボックスのインデックスを取得するには、次を使用します。 $("input:checkbox").index($(this)).

Answer 2

これは簡単な解決策ですが、次のように、おそらくインデックス ヒントを使用して、各チェックボックスに一意の ID を与えます。

<input id="checkbox-0" type="checkbox" />
<input id="checkbox-1" type="checkbox" />
<input id="checkbox-2" type="checkbox" />
<input id="checkbox-3" type="checkbox" />
<input id="checkbox-4" type="checkbox" />

これで、インデックスを簡単に取得できます。

$(document).ready(function() {
  $("input:checkbox").click(function() {
    index = /checkbox-(\d+)/.exec(this.id)[1];
    alert(index);
  });
});

Answer 3

答えてくれてありがとう、サムジャドソン。

さらに実験した結果、次のようにすることもできることがわかりました。 $(':checkbox') をクリックして選択します。を使用できるのは興味深いです。 .slice() 関数を使用して範囲を取得しますが、セレクターでそれを行うオプションもあります :gt そして :lt. 。次の構文を見つけました .slice() ただし、セレクターフィルターを使用するよりもクリーンです。

Ryan Duffield のソリューションはあまり好きではないと言わざるを得ません。マークアップの変更が必要で、コードの繰り返しが必要だからです。

Answer 4

@ゴルガポール:時には質問をもう少し文字通りに受け止める必要があると思います。:-) 何らかのインデックスが必要に制限されていると思いました。ただし、jQuery をさらに使用すると、通常はそのようなことをする必要がないことがわかると思います。