在特定元素之后获取具有特定类的下一个元素

Question

我有这样的HTML标记:

<p>
  <label>Arrive</label>
  <input id="from-date1" class="from-date calender" type="text" />
</p>

<p>
  <label>Depart</label>
  <input id="to-date1" class="to-date calender" type="text" />
</p>

<p>
  <label>Arrive</label>
  <input id="from-date2" class="from-date calender" type="text" />
</p>

<p>
  <label>Depart</label>
  <input id="to-date2" class="to-date calender" type="text" />
</p>

我希望从日期之后获取下一个元素以获得相应的日期.(布局稍微复杂一些,但是从日期开始,从日期开始,到日期已经到了日期类).

这是我想要做的,我想从date元素中获取并使用to-date类在dom中找到下一个元素.我试过这个:

$('#from-date1').next('.to-date')

但它给了我空的jQuery元素.我认为这是因为next给下一个兄弟匹配选择器.我怎样才能得到相应的to-date？

Answer 1

无法找到这样做的直接方法,所以为此编写了一个小的递归算法.

演示: http ://jsfiddle.net/sHGDP/

nextInDOM() 函数有两个参数,即从开始查看的元素和匹配的选择器.

代替

$('#from-date1').next('.to-date')

您可以使用:

nextInDOM('.to-date', $('#from-date1'))

码

function nextInDOM(_selector, _subject) {
    var next = getNext(_subject);
    while(next.length != 0) {
        var found = searchFor(_selector, next);
        if(found != null) return found;
        next = getNext(next);
    }
    return null;
}
function getNext(_subject) {
    if(_subject.next().length > 0) return _subject.next();
    return getNext(_subject.parent());
}
function searchFor(_selector, _subject) {
    if(_subject.is(_selector)) return _subject;
    else {
        var found = null;
        _subject.children().each(function() {
            found = searchFor(_selector, $(this));
            if(found != null) return false;
        });
        return found;
    }
    return null; // will/should never get here
}