2

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

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

5 回答 5

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

})();

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

于 2012-12-08T14:40:01.493 回答
1

试试这个

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

工作小提琴

于 2012-12-08T14:41:12.463 回答
1 
var i = 0;
$('.special').click(function(){
         $(".special:eq("+i+")").css('border','2px solid red');
     }
     i++;
});
于 2012-12-08T14:43:18.960 回答
1

.each()是一个迭代函数。它可以作为for each声明的替代品。

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

于 2012-12-08T14:44:53.837 回答
0 
$('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/

于 2012-12-08T14:47:37.610 回答