Question

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

在我的示例中，我尝试使用.each()在点击任何“特殊”div时为第一个元素添加边框。下次单击“特殊”div时，请在 second 'special'元素中添加边框。第三次点击任何“特殊”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

您不希望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 2

试试这个

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

工作FIDDLE

Answer 3

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

Answer 4

.each()是一个迭代函数。它可以替代for each语句。

此外，您的第二个选择器不正确'.special[i]'这将不会被jQuery解释。要使其工作，您必须连接变量'.special[' + 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/

使用each（）在这个简单的例子中不起作用

5 个答案: