7

要素のjQueryセットでn番目ごとに選択したい。

例えば。

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>
  1. 3 つおき (C および F) の要素を選択するにはどうすればよいですか?
  2. 同じセットの 3 分の 1 (A、B、D、E、G) ではない他のすべての要素を選択するにはどうすればよいですか?
4

3 に答える 3

11

$.grepセット内の各要素とそのインデックス (0 ベース) をコールバックに渡す関数を使用できます。したがって、どちらを保持するかはあなた次第です。

var elements = $('<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li></ul>').find('li');
var result = $.grep(elements, function(element, index) {
    return (index + 1) % 3 == 0;
});

他の要素が必要な場合は、条件を単純に反転します。(index + 1) % 3 != 0

別の可能性は、次の.filter()関数を使用することです。

var result = $('<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li></ul>')
    .find('li')
    .filter(function(index) {
        return (index + 1) % 3 == 0;    
    });
于 2012-08-19T10:54:55.810 に答える
7

ワーキングデモ

(1) $('li:nth-child(3n)')- リスト項目を 3 つおきに選択する

http://api.jquery.com/nth-child-selector/

(2) $('li').not(':nth-child(3n)')- その他を選択

http://api.jquery.com/not/

要素が DOM になく、質問で指定された文字列にのみある場合は、これらの手法を次のように組み合わせます.children()。

var thirds = $('<ul><li>A</li>...</ul>').children('li:nth-child(3n)');

var others = $('<ul><li>A</li>...</ul>').children('li').not(':nth-child(3n)');

この場合、リスト項目にネストされた要素がないため、 .children()andを同じ意味で使用できます。.find()ただし、一般に、前者は 1 レベル下のみを検索しますが、後者はすべての子孫を検索します (1 レベルだけ下に移動したいことがわかっている場合は効率的ではありません)。

于 2012-08-19T11:14:18.297 に答える
1

私は一般的な意味で返信しているだけです。問題定義の拡張と言えます（多くの人に役立つ可能性があります）。

3 番目の要素ごとに選択したいが、要素の開始が 3 番目の要素であるとは限らない場合を考えてみましょう。最初の要素を開始要素として使用する場合は、選択を A、D、G にするか、これらの要素をスキップする必要があります。

  1. $('li:nth-child(3n - 2)')
  2. $('li').not(':nth-child(3n- 2)')

ここで、「3n」の 3 は 3 番目の要素を選択し、「- 2」は選択を最初の要素にもたらします。

一般化された形で

  1. $('li:nth-child(3n - x)')
  2. $('li').not(':nth-child(3n- x)')

ここでxは、ex で詳しく説明されているように、最初の要素を定義するために変数を使用しています。その上

よろしくお願いします、
Rk_Hirpara

于 2016-07-14T10:40:21.037 に答える