jQuery .closest()返回多个结果

Question

我试图在我的html表单上实现一个验证，用引导类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"，所以如果用户提供了一个标签，但忘记了另外两个，那么i中只有"swift"和"iban"。

我的问题是，对于.each所做的每一个循环，.closest都返回所有的3个div，所以我无法根据带有.closest的标签来选择一个div。

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