jquery - 向父类添加类(不在树的正上方)

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 会考虑这些 sibling 吗？

谢谢!

Answer 1

find 不起作用的原因是错误不在 .accordion-item 内，而是在 div after 它。

您最好的选择可能是将 .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，然后使用 prev转到上一个同级元素(.accordion-item)，如下所示:

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

您最终会得到一个 jQuery 对象(一组元素)，其中包含 .accordion-item，其中包含 .error，这要归功于 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>

但这很脆弱，这就是为什么我要稍微改变一下结构。