jQuery .closest() возвращает несколько результатов

Question

Я пытаюсь реализовать валидацию в своей форме html, чтобы выделить входы формы с классом bootstrap has-error, если пользователь вводит неверные данные в моем приложении rails. Я использую ajax с пользовательским data объектом, который содержит сообщения об ошибках. До сих пор я придумал это:

application.js

jQuery.each(data.messages, function(i, val){ 
    $("label").val(i).closest("form-group").addClass("has-error"); 
    }); 

_account.html.erb

<div class="form-group"> 
<%= account_form.label(:label, "Label") %> 
<%= account_form.text_field(:label, class: "form-control") %> 
</div> 
<div class="form-group"> 
<%= account_form.label(:iban, "Iban") %> 
<%= account_form.text_field(:iban, class: "form-control", maxlength: 29, data: {toggle: "tooltip"}) %> 
</div> 
<div class="form-group"> 
<%= account_form.label(:swift, "Swift") %> 
<%= account_form.number_field(:swift, class: "form-control", maxlength: 8, data: {toggle: "tooltip"}) %> 
</div> 

Например, i = "swift" и val = "is blank", так что если пользователь предоставляет ярлык, но забывает о двух других, только "swift" и "iban" будет в i.

Моя проблема заключается в том, что для каждого цикла .each делает, .closest возвращает все 3 дивы, так что я не могу управлять, чтобы выбрать один DIV, основанный на этикетке с .closest

Answer 1

попробовать это: -

jQuery.each(data.messages, function(i, val){ 
    $("label:contains('"+i+"')").closest("form-group").addClass("has-error"); 
}); 

или это будет соответствовать всему тексту: -

jQuery.each(data.messages, function(i, val){ 
    var lbl=$('label').filter(function() { 
     return $(this).text().toLowerCase()==i.toLowerCase(); 
    }).first(); 
    lbl.closest(".form-group").addClass("has-error"); 
}); 

Answer 2

Так как вы хотите, чтобы выбрать метки, текст которых присутствует в data.messages объект Я думаю, вы можете попробовать

$('.form-group label').filter(function() { 
    return !!data.messages[$(this).text().trim()]; 
}).closest("form-group").addClass("has-error");