3

Как можно найти первый элемент определенного класса после текущего? Располагающийся в дереве ниже него, но неважно, на каком уровне вложенности. Например, так:

<div class = "текущий"></div>
<div></div>
<div class = "искомый"></div>

Или так:

<div>
    <div>
        <div class = "текущий"></div>
    </div>
</div>
<div class = "искомый"></div>
2
  • 1
    в общем случае только перебором все элементов, сначала на одном уровне, потом в детях, потом в родителях
    – Grundy
    22 янв 2016 в 9:39
  • 1
    Даже если получится, там будет полная жесть. Лучше не пихать это в селектор и по-человечески поднимаясь циклом наверх проверять.
    – Qwertiy
    22 янв 2016 в 10:00

3 ответа 3

1

Не знаю, в каком виде у вас текущий элемент, но вот повод для раздумий:

var i=0;
while($('.класс').eq(i++) != {ваш текущий элемент} );
{искомый элемент} = $('.класс').eq(i);

в jQuery так просто элементы сравнить нельзя, это псведокод. Тоже самое без лишних букв и знаков $, и работает, а не псевдокод:

var i=0,els=document.getElementsByClassName('класс');
while(els[i++] != {ваш текущий элемент} );
{искомый элемент} = els[i];

Можно еще так, суть та же, но коллег можно напугать:

var els=document.getElementsByClassName('класс');
{искомый элемент}=els[++Array.prototype.indexOf.call(els, {ваш текущий элемент} )]
6
  • как я понял из вопроса - классы все-таки разные
    – Grundy
    22 янв 2016 в 10:23
  • @Grundy плохо понял, там конкретно написано - найти первый элемент определенного класса после текущего
    – Darth
    22 янв 2016 в 10:24
  • Может быть, меня смутила разметка в вопросе: <div class = "текущий"></div> и <div class = "искомый"></div>
    – Grundy
    22 янв 2016 в 10:32
  • я понял, что дан любой элемент документа (как «текущий»), и дано имя класса. Нужно найти первый элемент указанного класса, расположенный в дереве после «текущего» элемента. Т.е. «текущий» элемент никак не связан с искомым классом.
    – Sergiks
    22 янв 2016 в 10:42
  • тогда проще воспользоваться функцией index :-)
    – Grundy
    22 янв 2016 в 10:44
1

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

function getNextElementByClassName(element, className) {
    // Проверка элемента и его дочерних (рекурсивно).
    var checkChildren = function(root, dontCheckRoot) {
        if (!dontCheckRoot && root.className.split(" ").indexOf(className) >= 0)
            return root;

        var children = root.children;
        for (var i = 0; i < children.length; ++i) {
            var elem = children[i];
            elem = checkChildren(elem);
            if (elem)
                return elem;
        }

        return null;
    }

    // Проверяем следующие элементы того же уровня.
    var next = element;
    do {
        var elem = checkChildren(next, next==element);
        if (elem)
            return elem;
    } while (next = next.nextElementSibling);

    // Переходим к родителю (если есть).
    var parent = element.parentElement;
    if (parent) {
        var sibling = parent.nextElementSibling;
        if (sibling)
            return checkChildren(parent.nextElementSibling);
    }

    return null;
}
0
function getNextElementByClassName(element, className) {
    var temp = element.className;
    element.className = className;
    var elems = document.querySelectorAll('.'+className);
    var i = [].indexOf.call(elems,element);
    element.className = temp;
    return elems[++i]
}
2
  • Тут к коду было бы здорово добавить хоть строку комментария.
    – Nick Volynkin
    23 янв 2016 в 16:20
  • если поиск идёт по классу, временно снимаем все классы с текущего, присваиваем класс который ищем,таки образом встраиваем текущий элемент в цепочку искомых, ищем место текущего в этой цепочке, значит следующий после нашего и есть тот что мы ищем, восстанавливаем текущему его классы и возвращаем то что нашли - элемент или пусто если далее нет нужного.
    – рони
    23 янв 2016 в 21:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.