13

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

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

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

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

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

4

4 回答 4

14

编辑

对于任何有兴趣的人，我已经在这里对它进行了插件化：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 结构如何，都会为.foo您提供第一个匹配项$('#item')

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

于 2012-10-13T12:39:02.863 回答
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();
于 2014-10-22T16:02:36.920 回答
1

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

var $yourelement;
(...)

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

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

于 2012-10-13T12:26:06.487 回答
0

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

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 旁边的第一个元素，如果需要，它会上升一个级别，然后再前进和潜水

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

于 2012-10-13T12:25:04.897 回答