13

この質問は以前に尋ねられたように感じますが、答えは各ポスターにかなり固有のようです.

特定の要素を識別し、特定のクラスを持つ次の要素を見つける方法を探しています。テーブルを解析しているので、parent() または children() を処理する必要はありません。行の最後またはテーブル自体の最後でさえ停止したくありません (そこに2つ並んでいます）。

要素の次のインスタンスをページ全体で検索する方法はありますか?

背景情報: http://jsfiddle.net/HKkAa/2/

強調表示されたセルから開始し、終了日に達するまで各セルに「ハイライト」クラスを適用して、一番下のテーブルを反復しようとしています。いつ終了日に達したかを計算する方法があります。リンクの次のインスタンスを選択するための魔法の方法が必要なだけです。

4

4 に答える 4

14

編集

興味のある方のために、ここでこれをプラグイン化しました: https://github.com/techfoobar/jquery-next-in-dom

jQuery を完全に汎用化し、すべて/任意の 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 に答える