javascript - 计算某个类之后具有相同类的所有 div 直到 dom 末尾(包括嵌套 div)？

Question

好的，我有以下 dom 树:

    <div class="daterow">
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
</div>
<br/>
<div class="daterow">
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="class1">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
</div>
<br/>
<div class="daterow">
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
</div>
<br/>
<div class="daterow">
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
    <div class="date">TEST CONTENT</div>
</div>

我试图在具有class1类的div之后计算所有具有日期类的div，我该如何在jquery或vanilla js中进行此操作，这是我到目前为止所拥有的，但我失败了， fiddle : http://jsfiddle.net/dXGw3/1/

Answer 1

我认为这符合你的要求:

$('.date').on('click', function () {
    var divs = $('div');
    var $findchckin = $('.class1');
    var index = divs.index($findchckin);
    divs.filter(':gt(' + index + ').date').addClass('aftercheckin');
});

<强> FIDDLE

如果您的 .daterow 位于实际页面上的容器内，则为了提高性能，您可能希望使用该容器作为 div 的上下文。