JQuery: забудьте структуру DOM, просто найдите следующий элемент с этим классом

Мне кажется, что этот вопрос задавали раньше, но ответы кажутся довольно конкретными для каждого плаката.

Я ищу способ идентифицировать данный элемент и найти следующий элемент, который имеет определенный класс. Я не хочу иметь дело с parent() или children(), так как я разбираюсь в таблице, и я не хочу, чтобы он останавливался в конце строки или даже в конце самой таблицы (там два бок о бок).

Есть ли способ просто найти всю страницу для следующего экземпляра элемента?

ИНФОРМАЦИОННАЯ ИНФОРМАЦИЯ: http://jsfiddle.net/HKkAa/2/

Я пытаюсь выполнить итерацию через нижнюю таблицу, начиная с выделенной ячейки и применяя класс "выделить" для каждой ячейки, пока не дойду до даты окончания. У меня есть способ рассчитать, когда я достиг конечной даты, мне просто нужен волшебный метод для выбора следующего экземпляра ссылки.

Ответы

Ответ 1

Edit

Для всех, кого это интересует, у меня есть плагин: здесь https://github.com/techfoobar/jquery-next-in-dom

В jQuery нет встроенного способа сделать это, если вы хотите, чтобы он был полностью общим и мог удовлетворить все/любую структуру DOM. Я однажды разработал простую рекурсивную функцию, которая делает это. Он выглядит следующим образом:

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);

Для ex:

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

вы получите первое совпадение .foo после $('#item') независимо от структуры DOM

Проверьте исходный ответ здесь: fooobar.com/questions/405294/...

Ответ 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];

Это вернет $allElements[0], если $yourElement является последним (делает его круговым списком)

Ответ 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;
    }       
}

Он ищет первый элемент рядом с элементом $и при необходимости поднимается до уровня, чтобы продолжить и снова погрузиться

Вы можете протестировать его здесь (откройте консоль, чтобы увидеть "следующий" элемент с селектором).