Jquery：忘记DOM结构，只用这个类找到下一个元素答案

【问题标题】：Jquery: Forget the DOM structure, just find the next element with this classJquery：忘记DOM结构，只用这个类找到下一个元素
【发布时间】：2015-08-30 11:26:33
【问题描述】：

我觉得以前有人问过这个问题，但每个海报的答案似乎都非常具体。

我正在寻找一种方法来识别给定元素并找到具有特定类的下一个元素。我不想处理 parent() 或 children() 因为我正在解析一个表，我不希望它停在一行的末尾甚至表本身的末尾（那里是两个并排的）。

有没有什么方法可以在整个页面中搜索元素的下一个实例？

背景信息： http://jsfiddle.net/HKkAa/2/

我正在尝试从突出显示的单元格开始遍历底部表格，并将“突出显示”类应用于每个单元格，直到达到结束日期。我有办法计算何时到达结束日期，我只需要魔术方法来选择链接的下一个实例。

【问题讨论】：

你应该尝试做一个更小的测试用例，我仍然没有得到你想要的结果。
我的主要目标是在开始日期和结束日期之间的每个日期中添加“突出显示”类，并在需要时让它在两个月内工作。我可以计算开始和结束之间的天数以确定循环何时结束，但我需要选择下一个日期单元格的逻辑（无论它位于哪个行或表格元素中）
我为另一个问题写的这个答案可能会有所帮助。 stackoverflow.com/a/11560428/921204

标签： jquery

【解决方案1】：

编辑

对于任何感兴趣的人，我在此处对其进行了插件化：https://github.com/techfoobar/jquery-next-in-dom

如果您希望它完全通用并且能够满足所有/任何 DOM 结构，那么在 jQuery 中没有内置的方法来执行此操作。我曾经制定了一个简单的递归函数来做到这一点。它是这样的：

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
}

你可以这样称呼它：

nextInDOM('selector-to-match', element-to-start-searching-from-but-not-inclusive);

例如：

var nextInst = nextInDOM('.foo', $('#item'));

无论 DOM 结构如何，都会在$('#item') 之后为您提供第一个匹配的.foo

在此处查看原始答案：https://stackoverflow.com/a/11560428/921204

【讨论】：

效果很好，几乎是即插即用的操作。 Jquery 中没有包含这种功能是有原因的吗？
也许他们没有找到足够的用例来保证包含在核心中。不过，我认为它会相当有用。

【解决方案2】：

无论 DOM 结构如何，以下代码都允许您找到与选择器匹配的下一个元素。

$.fn.nextThrough = function(selector) {
    // Our reference will be the last element of the current set
    var $reference = $(this).last();
    // Add the reference element to the set the elements that match the selector
    var $set = $(selector).add($reference);
    // Find the reference position to the set
    var $pos = $set.index($reference);
    // Return an empty set if it is the last one
    if ($set.length == $pos) return $();
    // Return the next element to our reference
    return $set.eq($pos + 1);
}

// Usage example
$(':focus').nextThrough('input:visible').focus();

【讨论】：

【解决方案3】：

假设您正在搜索类“.foo”。如果你愿意，你可以将它包装在一个可重用的函数中。

var $yourelement;
(...)

var $allElements = $('.foo');
var $nextElement = $allElements[$.inArray($yourElement,$allElements)+1];

如果$yourElement 是最后一个，这将返回$allElements[0]（使其成为循环列表）

【讨论】：

漂亮优雅的解决方案！

【解决方案4】：

我会使用这样的递归函数：

function findNext($element, selector) {
    while ($element) {
        var ne = $element.find(selector);
        if (ne.length) return ne;
        ne = $element.next(selector);
        if (ne.length) return ne;
        $element = $element.parent();
        if ($element.length==0) return null;
        $element = $element.next();
        if ($element.is(selector)) return $element;
    }       
}

它会搜索 $element 旁边的第一个元素，如果需要，它会上升一个级别，然后再次前进和潜水

您可以测试它here（打开控制台查看带有选择器的“下一个”元素）。

【讨论】：