如何定位下一个不是兄弟姐妹的 div？

Question

我需要为某些div添加一个current-month和一个next-month类。计划是使用 jquery 来定位第一个和第二个。与当前月份进行交互后，我将next-month切换到current-month，并将next-month添加到下一个目标div。

我针对第一个很好，但似乎无法针对下一个：

$('.event-month-container').first().addClass("current-month");
$('.event-month-container.current-month').next(".event-month-container").addClass("current-month");

我正在使用的代码 -> jsFiddle

-----编辑-----最终结果是：

加载第一个div 标记为

current-month，第二个div 标记为next-month。当current-month到达屏幕顶部时，我将把它设置为固定位置。当next-month到达当月底部时，它会把当月推开，去掉current-month类并将其添加到next-month中，在第三个月加next-month，依此类推......

-----编辑 v2 -----

.html

<div id="boxes">
        <div class="box quadruple">
            <div class="event-month-container">
                <p>June 2014</p>
            </div>
        </div>
        <div class="box single event">
            .... event info ....
        </div>
     ......
        <div class="box quadruple">
            <div class="event-month-container">
                <p>July 2014</p>
            </div>
        </div>
        <div class="box single event">
            ...event info...
        </div>
     ......
</div>

jquery：

$('.event-month-container').first().addClass("current-month");
$('.event-month-container.current-month').next(".event-month-container").addClass("current-month");

我需要定位quadruplediv 中的第一个event-month-container，以及不同quadruplediv 中的下一个event-month-container。在特定的滚动点，我将切换我的当前内容，并在此之后的下一个event-month-container定位。

Answer 1

我会尝试使用这些选择器：

var $current = $('.event-month-container').first();
$current.addClass('current-month');
var $next = $current.parent().siblings('.box.quadruple').find('.event-month-container');
$next.addClass('next-month');

这一切都与正确的 DOM 树遍历有关。

Answer 2

我不清楚工作流程是什么，但是如果您只需要获取第一个，使用它，移动到下一个等，您可以使用eq按索引移动，如下所示：

$('.event-month-container').eq(0).addClass("current-month");
// do something, move on
$('.event-month-container').eq(1).addClass("current-month");

Answer 3

$('.event').click(
function() {
    $(this).removeClass("current");
    $(this).next().addClass("current");
}
);

http://jsfiddle.net/FuMV4/1/

这样的东西可能会有所帮助？我不太确定你想做什么。

Answer 4

我认为你把它弄得太复杂了。月份已经是"ID'd"，您可以轻松找出给定当前月份的下一个。例如当前："2014-04" => 下一页："2014-05"。只需创建一个快速的单行函数来计算给定当前 ID 的下一个 ID，并将其传递到您的选择器中。

Answer 5

略有不同的方法，其中有一个计数器贯穿要向其添加类的元素总数。

这个小提琴是基本的，因为它只是像移位寄存器一样将"thisdiv"nextdiv"向下移动一排div，并且在您到达末尾时计数器被重置。

如果您按正式日期移动，则会出现问题，您必须使用 javascript date 函数，以便它根据上个月切换到适当的"每月第一天"(例如，2 月 28 日是 3 月 1 日，6 月 30 日是下一个 7 月 1 日(。

.JS

var thisdiv=0;
var nextdiv=1;
console.log('---------------------');
$('#clickme').on('click', function(){
    console.log(thisdiv, nextdiv);
    addmovement(thisdiv, nextdiv);
    if(thisdiv == 4)
    {
     thisdiv = -1;
     }
    if(nextdiv == 4)
    {
     nextdiv = -1;
       }
    ++thisdiv;
    ++nextdiv;
});
function addmovement( thisdiv, nextdiv )
{
    $('div').removeClass('thisdiv');
    $('div').removeClass('nextdiv');
    $('div:eq('+ thisdiv +')').addClass('thisdiv');
    $('div:eq('+ nextdiv +')').addClass('nextdiv');  
}