Поиск следующего экземпляра элемента, независимо от отношения, с помощью jQuery?

Question

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

<div class="col-sm-6"> 
    <label for="first_name">First Name</label> 
    <input type="text" id="first_name" name="first_name" /> 
    <div class="error">Please enter your first name.</div> 
</div> 

В этом случае, я могу использовать $(this).next.show(); для того, чтобы отобразить сообщение об ошибке.

Однако, в других случаях, мои поля структурированы следующим образом:

<div id="variants"> 
    <div class="col-sm-6 col-lg-4"> 
     <label><input type="radio" name="variant" value="red">Red</label><br/> 
     <label><input type="radio" name="variant" value="green">Green</label><br/> 
     <label><input type="radio" name="variant" value="blue">Blue</label> 
    </div> 
    <div class="col-sm-6 col-lg-4"> 
     <label><input type="radio" name="variant" value="yellow">Yellow</label><br/> 
     <label><input type="radio" name="variant" value="brown">Brown</label><br/> 
     <label><input type="radio" name="variant" value="orange">Orange</label> 
    </div> 
    <div class="error">Please select a product variant.</div> 
</div> 

В этом примере выше селектора JQuery не будет работать, так как .error элемент является родственным родителем ввода, вместо прямого брата входа.

Мой вопрос в том, есть ли способ выбрать следующий ближайший экземпляр элемента независимо от отношения к элементу, с которым он сравнивается? Я искал .closest(), но не смог заставить его работать.

Спасибо!

Answer 1

Вам необходимо эффективно искать вверх и вниз на каждом уровне иерархии.

$(this).parents().has('.error').first().find('.error'); 

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

Вы также могли бы использовать что-то вроде этого:

$(this).closest(':has(.error)').find('.error'); 

Вот это JSFiddle показывает, как работает (чтобы остановить все нытье): http://jsfiddle.net/u37twowx/1/ :)

Вы заметите это решение не требует добавления класса в иерархию.

Answer 2

Используйте общий класс для каждого контейнера-контейнера входных элементов и укажите ошибку div, используя closest() и find().

Для примера:

<div class="col-sm-6 element"> 
    <label for="first_name">First Name</label> 
    <input type="text" id="first_name" name="first_name" /> 
    <div class="error">Please enter your first name.</div> 
</div> 

<div id="variants" class="element"> 
    <div class="col-sm-6 col-lg-4"> 
     <label><input type="radio" name="variant" value="red">Red</label><br/> 
     <label><input type="radio" name="variant" value="green">Green</label><br/> 
     <label><input type="radio" name="variant" value="blue">Blue</label> 
    </div> 
    <div class="col-sm-6 col-lg-4"> 
     <label><input type="radio" name="variant" value="yellow">Yellow</label><br/> 
     <label><input type="radio" name="variant" value="brown">Brown</label><br/> 
     <label><input type="radio" name="variant" value="orange">Orange</label> 
    </div> 
    <div class="error">Please select a product variant.</div> 
</div> 

и теперь с JQuery:

$(this).closest(".element").find(".error").show(); 

Answer 3

Что-то, что я использую для спокойного когда-то использует класс :after псевдо, а затем добавить этот класс к элементу который получает ошибку.

Существует несколько способов сделать это, особенно если вы хотите создать собственное сообщение.

HTML

<input type="text" id="first_name" name="first_name" /> 

CSS

input.error:after, input.error::after { 
    content: ''; 
    position: relative; 
    bottom: 0; 
    height: 20px; 
    background: red; 
    color: white; 
} 

#first_name.error:after, #first_name.error:after { 
    content: 'Please input first name.'; 
} 

#last_name.error:after, #last_name.error:after { 
    content: 'Please input last name.'; 
} 
. 
. 
. 

JQuery

$('input').keypress(function(){ 
    if(/*Conditional*/){ 
     $(this).addClass('error'); 
    } 
}); 

Это простая функция JQuery, вы просто должны установить его для обработки ошибки соответственно.