Question

好的我有以下结构：

<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');
});

如何在.test和.checkin之间的所有嵌套.reserved div中添加一个类，如果.reserved不存在，则添加该类所有的.test div？

jsfiddle

Answer 1

试试这个：

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

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

Answer 2

试试这个

$('.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');
        }
    }
});

DEMO

Answer 3

您需要使用.hasclass()

说明：确定是否有任何匹配的元素分配给定的班级。

$(this).hasClass('reserved') // retuns boolean value

Answer 4

您可以使用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/

Answer 5

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

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

元素：是一个对象列表

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

value：是对象本身

如果类存在则将类添加到嵌套div，如果类不存在则添加到所有类？

5 个答案: