在bootstrap中无限循环遍历div？

Question

我需要循环遍历以2x2方式排列的4个div (cycle=highlighting选定的div)。我想不出执行此操作所需的j查询。

<div class="contentwrap-black" id="current-features">
<div id="content" class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <!-- ----------- IPHONE  --------- -->

                <div class="span4" id="iphone-white">
                    <img class="iphone-white-img" src="img/iphone-wht-front.png" alt="">
                </div>

                <!-- ----------- BANNER --------- -->

                <div class="span8">
                    <h1 class="current-features-banner">CURRENT FEATURES</h1>

                    <div class="row-fluid">

                        <!-- ----------- LEFT COLUMN --------- -->

                        <div class="span6" id="">
                            <div class="row-fluid">
                                <div class="span12 content" id="">
                                    <h3>Heading-1</h3>
                                    <p> Paragraph-1</p>
                                </div>


                                    <div class="span12" id="divider">
                                        <hr>
                                    </div>



                                    <div class="span12 content" id="">
                                        <h3>Heading-2</h3>
                                        <p> Content-2</p>
                                        <hr id="line"> <!-- THIS LINE IS HIDDEN UNTIL MOBILE SIZE-->
                                    </div>

                            </div>
                        </div>

                        <!-- ----------- RIGHT COLUMN --------- -->

                        <div class="span6" id="">
                            <div class="row-fluid set">
                                <div class="span12 content" id="">
                                    <h3>heading-3</h3>
                                    <p>paragraph-3
                                </div>


                                    <div class="span12 trap" id="divider">
                                        <hr>
                                    </div>



                                    <div class="span12 content " id="">
                                        <h3>heading-4</h3>
                                        <p>paragraph-4.</p>
                                    </div>

                            </div>
                        </div>
                        <!-- ----------- END OF COLUMNS --------- -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

我想要循环的4个div是包含类"content“的div，突出显示每个div 2秒，然后切换到下一个div。

Answer 1

这不包括你的动画或你想要做的任何事情，但它展示了如何让它无限循环。

function cycle() {
    $(".container .content")
        .last()
        .detach()
        .prependTo(".container");
}

// and in the inverse sense
function cycle() {
    $(".container .content")
        .first()
        .detach()
        .appendTo(".container");
}

示例http://jsfiddle.net/XuHQv/

好的，所以颜色循环是http://jsfiddle.net/XuHQv/1/

    setInterval(function() {
        var items  = $(".container .content");
        var length = items.length;     

        items.each(function(i, ele) {
            if ($(ele).hasClass("color")) {
                $(ele).removeClass("color");

                if (i < (length-1)) {
                  $(items[i+1]).addClass("color");
                }
                else {
                    $(items[0]).addClass("color");
                }    

                return false;
            }                
        });
    }, 1000);

Answer 2

我有一把小提琴给你：http://jsfiddle.net/tkjzZ/4/

编辑:我修复了需要标志类的问题。不过，您仍然需要从突出显示的一个开始。

    function changeHighlight()
{
    if($(".content.highlight").is(":last"))
    {
        $(".highlight").removeClass("highlight");
        $(".content").first().addClass("highlight");
    }
    else
    {
        $(".highlight").removeClass("highlight").next().addClass("highlight");
    }
}

$(document).ready(function () {
    setInterval(changeHighlight, 2000); //2 sec
});