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>

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

$(".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 开始，这将是 4，而不是 6

我将保留以下选择器来展示如何移动 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();

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

查看演示 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");

增强方法演示

于 2013-08-26T12:38:22.160 回答