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 中解决这个问题，这是我到目前为止所拥有的，但我失败了，小提琴： 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');
});

小提琴

如果您.daterow的 s 在真实页面上的容器中，您可能希望将该容器用作 , 的上下文以divs提高性能。

Answer 2

这有效：http: //jsfiddle.net/dXGw3/9/

$(function() {
    $('.daterow > .class1').each(function() {
        console.log($(this).nextAll('.date').length);
    });
});