html - 无限期地在 bootstrap 中循环 divs？

Question

我需要循环遍历以 2x2 方式排列的 4 个 div(循环 = 突出显示所选的 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 是包含“内容”类的 div，突出显示每个 div 2 秒，然后切换到下一个。

Answer 1

我有一把 fiddle 给你: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
});