0

好的，我有以下结构：

<div class="class">
    <div class="test"></div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
</div>
<div class="class">
    <div class="test"></div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test reserved">test</div>
</div>
<div class="class">
    <div class="test"></div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
</div>

这个js：

$('.test').on('click', function () {
    $(this).addClass('checkin');
});

如何在and.test之间的所有嵌套 div 中添加一个类，如果在不存在的情况下将该类添加到所有div？.checkin.reserved.reserved.test

jsfiddle

4

5 回答 5

2

尝试这个：

$('.test').on('click', function () {
    $(this).nextUntil('.reserved').andSelf().addClass('checkin');
});

http://api.jquery.com/nextUntil/
http://api.jquery.com/andSelf/

于 2013-09-05T15:18:11.530 回答
1

尝试这个

$('.test').on('click',function(){
$(this).addClass('checkin').nextUntil('.preserved').addClass('checkin');   
    for (var i = 0; i < $(this).parent().nextAll('.class').length;i++){
        var $class=$(this).parent().nextAll('.class').eq(i);
        if($class.find('.reserved').length ==0){

        }else{
            $class.find('.test:first').nextUntil('.reserved').addClass('checkin');
        }
    }
});

演示

于 2013-09-05T15:24:03.053 回答
0

你需要使用.hasclass()

描述：确定任何匹配的元素是否分配给给定的类。

$(this).hasClass('reserved') // retuns boolean value
于 2013-09-05T15:09:25.847 回答
0

您可以使用 jquery nextUntil() 函数：http ://api.jquery.com/nextUntil/

这对你的确切问题很有效，但如果你想稍微调整一下，你应该回到愚蠢的蛮力方法：获取数组并用布尔值循环它。

$('.test').on('click', function(e){
    //add the class to your target
    $(e.target).addClass('checkin');

    //get an array of all the .test divs in the .class div you click
    var arTests = $(e.target).parent().find('div.test');
    //if you want to loop on all the .test of the page, just go like that :
    // var arTests = $('div.test');

    //boolean to check in the loop
    var boCheckinPased = false;
    var boReservedPassed = false;

    for(var i = 0; i < arTests.length; i++) {
        if($(arTests[i]).hasClass('checkin')) boCheckinPased = true;
        if($(arTests[i]).hasClass('reserved')) boReservedPassed = true;

        //if passed the first checkin and not yet the reserved, add the class
        if(boCheckinPased && !boReservedPassed) $(arTests[i]).addClass('checkin')
    }
});

我确实在这里更新了一个 jsfiddle：http: //jsfiddle.net/SvFAA/8/

于 2013-09-05T15:28:44.710 回答
0

更少的代码是更好的代码：

$('.test').on('click', function(){
    var elements = $('.class .test');
    elements.each(function(key, value) {
        if (!$(elements[key]).hasClass('reserved')) {
            $(elements[key]).addClass('checkin');       
        }
    });
});

元素：是一个对象列表

key：是元素列表中每个元素的位置

value：是对象本身

于 2013-09-05T15:47:28.857 回答