在这个简单的例子中使用 each() 不起作用

Question

我试图了解如何使用jquery的each（），因为到目前为止我尝试的不起作用。

在我的示例中，我尝试使用 .each() 在单击任何"特殊"div 时为第一个元素添加边框。下次单击"特殊"div 时，为第二个"特殊"元素添加边框。第三次单击任何"特殊"div 时，为第三个元素添加边框，依此类推......

.JS

$.each(function(i) {
     $('.special').click(function(){
         $('.special[i]').css('border','2px solid red');
     }
     i++;
});

.HTML

    <div class="special">fooft1</div>
    <div class="special">fooft2</div>
    <div class="special">fooft3</div>
    <div class="special">fooft4</div>
    <div class="special">fooft5</div>
    <div class="special">fooft6</div>

Answer 1

var i = 0;
$('.special').click(function(){
         $(".special:eq("+i+")").css('border','2px solid red');
     }
     i++;
});

Answer 2

你不想为此each：

(function() {
    var nextIndex = 0;
    $(".special").click(function() {
        $('.special').eq(nextIndex).css('border','2px solid red');
        ++nextIndex;
    });
})();

（包装函数的原因是我不想nextIndex全局。如果您的代码已经在函数中，则不需要额外的包装器。

或者，如果特价不是动态的，您可以根据需要在通话之间记住它们：

(function() {
    var nextIndex = 0,
        specials = $(".special");
    specials.click(function() {
        specials.eq(nextIndex).css('border','2px solid red');
        ++nextIndex;
    });
})();

如果超过最后一个行为，您可能还需要一些行为，例如删除处理程序或类似行为。

Answer 3

.each()是一个迭代函数。它作为for each语句的替代品很有用。

此外，你的第二个选择器不正确'.special[i]' jQuery不会解释。要使其工作，您必须将变量连接'.special[' + i + ']'。这将使您的代码将边框添加到集合中的每个元素。

Answer 4

试试这个

var i = 0;
$('.special').click(function() {
    $('.special').eq(i).css('border', '2px solid red');
    i++;
});

工作小提琴

Answer 5

$('div.special').each(function(i,e) {
    $(this).click(function() {
        if($(this).hasClass('current')) {
            $(this).css('border', '1px solid red').removeClass('current');
            $(this).next().addClass('current');
        }
   });        
});
<div class="special current">fooft1</div>
<div class="special">fooft2</div>
<div class="special">fooft3</div>
<div class="special">fooft4</div>
<div class="special">fooft5</div>
<div class="special">fooft6</div>

http://jsfiddle.net/v7gJF/