Question

所以我有一个像这样的元素列表;

<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>

基本上我需要弄清楚相对于选择器的下一个元素是什么，其顺序可以被四整除，从头开始计算。如果相对于选择器没有足够的元素，则返回最后一个元素。因此，我会得到以下结果;

$(".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>

我将如何实现这一目标？

Answer 1

如果你想在选择后使用它作为一个函数，你可以做一些原型：

// 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开始，这将使4，而不是6

我将保留以下选择器以显示如何移动4个点，但它不是这个问题的问题： CSS有一个可用于jQuery的第n个选择器：

$('div:nth-child(4n+'+startElement+')').css({background: pink});

Answer 2

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();

DEMO： http://jsfiddle.net/zZVax/1/

Answer 3

作为 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才能按预期工作。我还添加了一段代码来返回最后一个元素（如果没有找到）。

请参阅 Demo jsFiddle

为了更灵活，您还可以将“步骤”作为参数传递：

$.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");

<强> Enhanced method demo

找到可被4整除的下一个元素

3 个答案: