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");

我正在使用它的代码 - ＆gt; jsFiddle

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

Onload第一个div被标记为current-month，第二个被标记为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");

我需要定位event-month-container div中的第一个quadruple和另一个event-month-container div中的下一个quadruple。在特定的滚动点，我会切换当前的内容，并在此之后定位下一个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 Tree Traversal。

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

我认为你过度复杂了。月份已经是＃34; ID＆＃39; d＆＃34;以某种方式，你可以轻松地找出当前的下一个。例如。电流：＆＃34; 2014-04＆＃34; =＆GT;下一个：＆＃34; 2014-05＆＃34 ;.只需创建一个快速的单行函数来计算给定当前值的下一个ID并将其传递给选择器。

Answer 5

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

这个FIDDLE是基本的，它只是将“thisdiv”“nextdiv”向下移动一行div，就像移位寄存器一样，当你到达终点时，计数器会被重置。

如果您按正式日期转换，则会出现问题，您必须使用javascript日期函数，因此它将根据上个月（例如，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');  
}

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

5 个答案: