Question

我知道.next()它不会像迭代器列表一样返回匹配集中的下一个元素。所以，如果你说next（）列表中的第一项，那么第二项，依此类推。但它实际上找到了匹配选择器的兄弟姐妹。

我想要做的是在匹配元素列表中获取nextItem。

$('p.special')
.nextItem().css('color','green')
.nextItem().css('color','blue')
.nextItem().css('color','red');

这应该使第一个p元素具有类特殊绿色，然后第二个p元素具有类特殊蓝色，依此类推。无论他们是兄弟姐妹还是没有兄弟姐妹。

我不想循环。因为循环不能轻易控制。所以我认为each是不可能的。想一想，有下一个按钮，用户按下它。每次按下的p.special都会逐一改变颜色。

到目前为止，我能想出的唯一方法是使用.eq ...

Answer 1

和其他人一样，我真的不知道你为什么要避免循环。

我所知道的唯一方法是接近你所要求的是编写自己的自定义插件方法并将迭代状态存储在原始jQuery对象中，这样每次调用自定义方法时，迭代位置可以从原始的jQuery对象中检索：

jQuery.fn.nextItem = function() {
    // if no DOM objects in here, then just return an empty jQuery object
    if (!this.length) {
        return $();
    }
    var index = this._nextItemIndex || 0;
    var next = $(this[index]);
    this._nextItemIndex = (index + 1) % this.length;
    return next;
}

然后，你实际上可以这样做：

var list = $('p.special');
list.nextItem().css('color','green');
list.nextItem().css('color','blue');
list.nextItem().css('color','red');

工作演示：http://jsfiddle.net/jfriend00/do3n1yf4/

你不能链接方法，因为根据定义，.nextItem()必须返回一个不同于原始的jQuery对象，其中只有一个DOM元素，因此你不能直接链接。

.nextItem()将遍历原始jQuery对象中的DOM元素，当它到达结尾时回绕到第一个元素。

请注意，迭代状态存储在jQuery对象$('p.special')上，因此您必须保留该特定的jQuery对象，以便保持使用相同的状态。如果您重新创建$('p.special')，状态将被丢弃并重置回0。如果需要，该状态可以存储在其他地方（在DOM对象，变量等中......）。

如果要将nextItem()状态存储在某个持久性的地方，可以将其存储在集合中第一个DOM元素的.data()上：

jQuery.fn.nextItem = function() {
    // if no DOM objects in here, then just return an empty jQuery object
    if (!this.length) {
        return $();
    }
    var marker = $(this[0]);
    var index = marker.data("_nextItemIndex") || 0;
    var next = $(this[index]);
    marker.data("_nextItemIndex", (index + 1) % this.length);
    return next;
}

$('p.special').nextItem().css('color','green');
$('p.special').nextItem().css('color','blue');
$('p.special').nextItem().css('color','red');

这将允许您重新创建jQuery对象，并且只要集合中的第一个DOM元素没有更改，.nextItem()仍然有效。

工作演示：http://jsfiddle.net/jfriend00/bpsjou7m/

Answer 2

循环完全这里需要什么。如果要将要添加的颜色存储在数组中，可以使用each()：

添加它们

＆＃13;

var colours = ['green', 'blue', 'red'];
$('p.special').each(function(i) {
    $(this).css('color', colours[i % colours.length]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>
<p class="special">Special</p>

＆＃13;

Answer 3

如果您不想循环播放，则可以使用.css( propertyName, function)。仍然jQuery将在内部使用。

在这个示例中，我创建了一个颜色数组，可以使用它的索引来设置段落的颜色。

＆＃13;

$(document).ready(function() {
  var colors = ['green', 'blue', 'red'];
  $('p.special').css('color', function(index) {
    return colors[index % colors.length]; 
  }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="special">special 1</p>
<p class="special">special 2</p>
<p class="special">special 3</p>
<p class="special">special 4</p>
<p class="special">special 5</p>

＆＃13;

如何从匹配集中获取下一个元素？

3 个答案: