Question

我有一个包含许多字段组的表单。每个字段组包含许多div。提交表单时，不填充必填字段，并且返回的表单带有.error类，该类附加到不完整的元素上。

我想使用jQuery将.error类（或下面的示例中的内联css）附加到每个包含分配了.error类元素的字段组。

标记

<h3 class="field-group-format-toggler accordion-item"><a href="#">T-Shirt Size</a></h3>
<div class="field-group-format-wrapper required-fields">
  <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
  </div>
</div>

您将看到.field-group-format-wrapper不是h3的后裔。如果需要，我可以重写标记，但是不想这样做。

css

.error {
border: 2px solid red;
}

jQuery

我尝试过：

 $( ".accordion-item" ).find(".error").css( "border", "2px solid red" );

，以及尝试.parents()，但似乎无法正确理解我的语法。 jQuery会考虑这些兄弟姐妹吗？

谢谢！

Answer 1

find不起作用的原因是错误不在.accordion-item内，它们在之后中。

您最好的选择是将.accordion-item和.field-group-format-wrapper放在某种包装中，因此将它们分组在一起，您可以使用closest（找到包装），然后再find（找到.accordion-item）。例如：

var accordionItemsWithErrors = $(".error").closest(".accordion-wrapper").find(".accordion-item");

实时示例：

var accordionItemsWithErrors = $(".error").closest(".accordion-wrapper").find(".accordion-item");
accordionItemsWithErrors.addClass("accordion-error");

.accordion-error {
  border: 1px solid red;
}

<div class="accordion-wrapper">
  <h3 class="field-group-format-toggler accordion-item"><a href="#">Has Errors</a></h3>
  <div class="field-group-format-wrapper required-fields">
    <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
    </div>
  </div>
</div>

<div class="accordion-wrapper">
  <h3 class="field-group-format-toggler accordion-item"><a href="#">Doesn't Have Errors</a></h3>
  <div class="field-group-format-wrapper required-fields">
    <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
    </div>
  </div>
</div>

<div class="accordion-wrapper">
  <h3 class="field-group-format-toggler accordion-item"><a href="#">Also Has Errors</a></h3>
  <div class="field-group-format-wrapper required-fields">
    <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
    </div>
    <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
      <input class="form-radio error" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您无法执行此操作，我可能会搜索.error，然后使用closest来获取它们所在的.field-group-format-wrapper，然后使用{{3} }转到上一个兄弟元素（.accordion-item），如下所示：

var accordionItemsWithErrors = $(".error").closest(".field-group-format-wrapper").prev();

由于jQuery具有基于集合的性质，因此您最终将得到一个包含.accordion-item且其中包含.error的{{1}}的jQuery对象（一组元素）。

实时示例：

var accordionItemsWithErrors = $(".error").closest(".field-group-format-wrapper").prev();
accordionItemsWithErrors.addClass("accordion-error");

.accordion-error {
  border: 1px solid red;
}

<h3 class="field-group-format-toggler accordion-item"><a href="#">Has Errors</a></h3>
<div class="field-group-format-wrapper required-fields">
  <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
  </div>
</div>

<h3 class="field-group-format-toggler accordion-item"><a href="#">Doesn't Have Errors</a></h3>
<div class="field-group-format-wrapper required-fields">
  <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
  </div>
</div>

<h3 class="field-group-format-toggler accordion-item"><a href="#">Also Has Errors</a></h3>
<div class="field-group-format-wrapper required-fields">
  <label for="edit-field-appl-tshirt-und">T-Shirt Size <span class="form-required" title="This field is required.">*</span></label>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-2" name="field_appl_tshirt[und]" type="radio" value="1"> <label class="option" for="edit-field-appl-tshirt-und-2">S</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-3" name="field_appl_tshirt[und]" type="radio" value="2"> <label class="option" for="edit-field-appl-tshirt-und-3">M</label>
  </div>
  <div class="form-item form-type-radio form-item-field-appl-tshirt-und">
    <input class="form-radio error" id="edit-field-appl-tshirt-und-4" name="field_appl_tshirt[und]" type="radio" value="3"> <label class="option" for="edit-field-appl-tshirt-und-4">L</label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是那很脆弱，这就是为什么我要稍微改变结构的原因。

将类添加到父类（不在树的上方）

1 个答案: