向父类添加类（不在树的正上方）

问题描述 投票：2回答：1

我有一个包含许多字段组的表单。每个字段组包含许多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会考虑这些兄弟姐妹吗？

谢谢！

jquery
1个回答
1
投票

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

你最好的选择可能是将.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-wrappers，然后使用prev转到上一个兄弟元素（.accordion-item），如下所示：

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

由于jQuery基于集合的特性，你最终会得到一个jQuery对象（一组元素），其中包含.accordion-items，其中包含.errors。

实例：

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>

但这很脆弱，这就是我改变结构的原因。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.