用于上一个/下一个导航的 jQuery 索引 div

Posted 2023-02-25

【中文标题】用于上一个/下一个导航的 jQuery 索引 div

【英文标题】：jQuery indexing divs for prev/next navigation

【发布时间】：2014-03-19 18:16:47

【问题描述】：

我想知道是否可以使用 jQuery 创建类似于 prev/next 导航的东西，它索引所有具有相同类的 div。为了尝试这个，我创建了一个非常基本的小提琴。

html：

<ul class="list-inline">
    <li><a href="#" class="prevtrigger">PREV</a></li>
    <li><a href="#" class="nexttrigger">NEXT</a></li>
</ul>

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
            </div>  
            <div class="col-md-6">
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
            </div>
        </div>
    </div>

我还创建了一个基本的 jQuery 操作来更改框的颜色：

$( document ).ready(function() 

     $('.prevtrigger').click(function()
                  $( '.box' ).css("background-color", "blue")
     );

    $('.nexttrigger').click(function()
                  $( '.box' ).css("background-color", "green")
     );

);

现在的问题是：如何根据实际索引将一个 div 着色为一个又一个红色或绿色。任何人的想法？看看我的小提琴：HERE!

【参考方案1】：

看看下面的 jQuery 函数：

上一页() 下一个()

例子：

$(".box.active").prev().css("background-color", "blue" );
$(".box.active").next().css("background-color", "green");

您可以为当前元素添加一个“活动”类，并使用 prev 和 next 函数进行切换。

Jsfiddle

【讨论】：

谢谢！好像我被卡住了。添加一个“活动”类似乎是有道理的，但是您如何实现呢？好像我现在真的不明白：D

是的，我想我只是需要休息一下，谢谢！我尝试在“更大”的项目（我正在研究的一个投资组合）上实现这一点，但我无法重现这一点 - 你能看到我的错误吗？小提琴：jsfiddle.net/mleyendecker/632Fw/105

我所说的“错误”的意思是，它不会查找所有元素，只查找一个 .col-md-6 列表 div 中具有相同类的元素 - 是否有机会有用吗？