使用jQuery循环使用DIV

时间:2011-01-07 03:06:50

标签: javascript jquery html

我在以下结构中有一组div:

<div id="team">

        <div class="member">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>

        <div class="member">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>      

        <div class="member">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>      

        <div class="member">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>  

    </div>

我想使用jQuery循环遍历每个div并添加一个floatLeft类(如果它是一个偶数div)和floatRight(如果它是奇数)。我尝试使用以下代码执行此操作,但它将floatLeft和floatRight添加到所有div ...

var $el,i,$selectedDivs,count;

    $selectedDivs = $('#team > div');
    count = $selectedDivs.length;

    $selectedDivs.each(function() {
        $el = $(this);

        for (i=0; i<=count; i++) {
            if (i % 2 == 0) {
                $el.addClass('floatLeft');
            }
            else {
                $el.addClass('floatRight');
            }
        }
    });

我猜这是因为.each()函数...我的问题是这个。由于$ selectedDivs不是数组,我如何使用for循环而不是.each()函数遍历每个div?我故意想用这种方式而不是jQuery的.odd()和:奇怪的功能......

谢谢!阿米特

4 个答案:

答案 0 :(得分:2)

您应该使用for循环或each,但不能同时使用。{/ p>

for循环中,您可以编写$selectedDivs.eq(i).addClass

答案 1 :(得分:2)

您的功能应写成如下,而不是:

var i = 0;
$selectedDivs.each(function() {
    $el = $(this);

    if (i % 2 == 0) {
        $el.addClass('floatLeft');
    }
    else {
        $el.addClass('floatRight');
    }
    i++;
});

答案 2 :(得分:1)

我正在寻找一个词,在Python世界中它是“Pythonic”。这个词的意思是“与常见的习语一致”,但对于jQuery来说。 “jQueryish?”

jQuery("#team > div:even").addClass("floatLeft");
jQuery("#team > div:odd").addClass("floatRight");

答案 3 :(得分:0)

  

我的问题是这个。由于$ selectedDivs不是一个数组,我如何使用for循环而不是.each()函数遍历每个div?

但是确实如此。试试这段代码:

int counter = $selectedDivs.length - 1; //zero based so sub one
for (; counter > 0; counter--){ //note I went for the backwards loop here, your preference
   var javascriptElement = $selectedDivs[counter];
   // I like to play with my javascriptElement in the morning
   // I like to play with my javascriptElement in the afternoon
   // I like to play with my javascriptElement in the evening
}

这确实完全你问的是什么。