1

だから私はそのような要素のリストを持っています;

<div></div>
<div class="test"></div>
<div></div>
<div class="test2"></div>
<div></div>
<div></div>
<div class="test3"></div>
<div></div>
<div class="test4"></div>
<div></div>

そして本質的に、最初から数えて、順序が 4 で割り切れるセレクターに関連する次の要素が何であるかを把握する必要があります。セレクターに対して十分な要素がない場合、最後の要素が返されます。したがって、次のような結果が得られます。

$(".test").nextFour().after("Hello");
// or $(".test2").nextFour().after("Hello");

<div></div>
<div class="test"></div>
<div></div>
<div class="test2"></div>
Hello
<div></div>
<div></div>
<div class="test3"></div>
<div></div>
<div class="test4"></div>
<div></div>


$(".test3").nextFour().addClass("hello");

<div></div>
<div class="test"></div>
<div></div>
<div class="test2"></div>
<div></div>
<div></div>
<div class="test3"></div>
<div class="hello"></div>
<div class="test4"></div>
<div></div>


$(".test4").nextFour().css("color", "red");

<div></div>
<div class="test"></div>
<div></div>
<div class="test2"></div>
<div></div>
<div></div>
<div class="test3"></div>
<div></div>
<div class="test4"></div>
<div style="color: red;"></div>

どうすればこれを達成できますか？

4

3 に答える 3

7

セレクターの後の関数として使用する場合は、何かをプロトタイプ化できます。

// Here is a untested example:
$.fn.nextFour = function (arguments){
    // As suggested by Crazy Train:
    return $(this).parent().children().eq(idx + 4-(idx%4)-1); // -1 to correct zero-based index
}

Crazytrain が問題は 4 つの要素を移動することではなく、4 で割り切れる次の項目に移動することであると指摘した後、回答を変更しました。2 から開始すると、6 ではなく 4 になります。

4 つのスポットを移動する方法を示すために次のセレクターを保持しますが、この質問に対する回答ではありません: CSS には、jQuery で使用できる n 番目のセレクターがあります。

$('div:nth-child(4n+'+startElement+')').css({background: pink});
于 2013-08-26T12:30:56.487 に答える
4 
var elem = $(selector);
var idx = elem.index() + 1;

var target = elem.parent().children().eq(idx + 4-(idx%4)-1);

if (!target.length)
    target = elem.parent().children().last();

デモ: http://jsfiddle.net/zZVax/1/

于 2013-08-26T12:31:59.693 に答える
1

Crazy Trainを補完するために、例のように使用する jQuery メソッドを作成できます。

(function( $ ){
   $.fn.nextFour = function() {
      elem = this.parent().children().eq(this.index() + 3-(this.index()%4));
      return elem.length ? elem : this.parent().children().last();
   }; 
})( jQuery );

編集：期待どおりに動作する必要があることに注意して+ 3ください。何も見つからなかった場合に最後の要素を返すコードも追加しました。

デモを見る

より柔軟にするために、「ステップ」をパラメーターとして渡すこともできます。

$.fn.nextStep = function(step) {
    elem = this.parent().children().eq(this.index() + step -1 -(this.index()%step));
    return elem.length ? elem : this.parent().children().last();
};

そして、次のように使用します：

$(".test3").nextStep(4).addClass("hello");

拡張メソッドのデモ

于 2013-08-26T12:38:22.160 に答える