jQuery получить первый следующий элемент в DOM

Question

У меня есть форма HTML с двумя элементами DOM, которые работают вместе - ввод и сообщение об ошибке. Когда форма отправлена, а ввод пуст, я хочу применить некоторый код к сообщению об ошибке. Моя проблема в том, что мой HTML для позиции сообщения об ошибке строится по-разному в зависимости от платформы - настольной или мобильной - и я ничего не могу с этим поделать.

Пример рабочего стола:

<form name="form">
    <div>
        <input type="text" name="input-one">
        <div class="error-message"></div>
    </div>
    <div>
        <input type="text" name="input-two">
        <div class="error-message"></div>
    </div>
    ...
</form>

Пример мобильного телефона:

<form name="form">
    <div>
        <input type="text" name="input-one">
    </div>
    <div class="error-message"></div>
    <div>
        <input type="text" name="input-two">
    </div>
    <div class="error-message"></div>
    ...
</form>

Вы можете видеть, что в зависимости от платформы сообщение об ошибке может быть частью того же или другого родителя. По этой причине я не могу использовать селектор jQuery .next (). Я пробовал использовать также селектор .closest (), но он переносит DOM вверх и тоже не работает.

Итак, я пытаюсь достичь - используя относительную ссылку на элемент DOM (в данном случае ввод), найдите первый следующий элемент DOM, содержащий определенный класс c (в данном случае «error- сообщение").

Пример Javascript заглушка:

$('[name=form]').find(':text:visible').each(function (i, el) {
// select the next error message
});

Есть ли какая-либо комбинация селекторов, которая может помочь мне в этом?

Answer 1

К сожалению, это не могло быть обработано с помощью CSS, но если вы действительно застряли с этой структурой, то предполагая, что $input является объектом jQuery для элемента input, тогда:

const $error = $input.nextAll(".error-message").add($input.parent().next(".error-message"));

nextAll выберет всех следующих братьев и сестер, соответствующих селектору. parent будет go до родителя, а next будет соответствовать следующему брату, но только если он соответствует селектору. Поскольку один или другой из них будет пустым, вы получите набор из одного элемента - элемента сообщения об ошибке.

Рабочий стол:

$("input").on("input", function() {
    const $input = $(this);
    const $error = $input.nextAll(".error-message").add($input.parent().next(".error-message"));
    $error.text("Count: " + $input.val().length);
});

<form>
    <div>
        <input type="text" name="input-one">
        <div class="error-message"></div>
    </div>
    <div>
        <input type="text" name="input-two">
        <div class="error-message"></div>
    </div>
    Type in either input to see a count in its error box.
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Мобильный:

$("input").on("input", function() {
    const $input = $(this);
    const $error = $input.nextAll(".error-message").add($input.parent().next(".error-message"));
    $error.text("Count: " + $input.val().length);
});

<form>
    <div>
        <input type="text" name="input-one">
    </div>
    <div class="error-message"></div>
    <div>
        <input type="text" name="input-two">
    </div>
    <div class="error-message"></div>
    Type in either input to see a count in its error box.
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>