Блог

У меня есть следующая HTML-разметка:

 <div data-type="checkbox" class="widget_type_checkbox">
 <div>
    <div class="helptext">help text</div>
    <div class="validationMessage" style="display: none;">Error message</div>
    <input id="widget_chk_I095Q7N6" type="checkbox" name="chk_I095Q7N6" required="" value="true" >
    <label for="widget_chk_I095Q7N6">My checkbox</label>
 </div>
</div>
  

Для всех флажков с классом widget_type_checkbox я хочу обернуть ввод и метку внутри диапазона следующим образом:

 <div data-type="checkbox" class="widget_type_checkbox">
  <div>
    <div class="helptext">help text</div>
    <div class="validationMessage" style="display: none;">Error message</div>
    <span>
       <input id="widget_chk_I095Q7N6" type="checkbox" name="chk_I095Q7N6" required="" value="true" >
       <label for="widget_chk_I095Q7N6">My checkbox</label>
    </span>
 </div>
</div>
 
  

Следующее не работает:

 $(".widget_type_checkbox").find("> div > span").not(":has(span)").find('input').next().andSelf().wrap('<span>');
  

Использование wrapAll()

1. andSelf() устарел, используйте .addBack() вместо этого.

2. wrap() обертывает все элементы по отдельности, используйте wrapAll() вместо этого.

3. "> div > span" селектор, начинающийся с > , недопустим

 $(".widget_type_checkbox :not(span) > input").each(function() {
  $(this).next().addBack().wrapAll("<span>")
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-type="checkbox" class="widget_type_checkbox">
  <div>
    <div class="helptext">help text</div>
    <div class="validationMessage" style="display: none;">Error message</div>
    <input id="widget_chk_I095Q7N6" type="checkbox" name="chk_I095Q7N6" required="" value="true">
    <label for="widget_chk_I095Q7N6">My checkbox</label>
  </div>
</div>

<div data-type="checkbox" class="widget_type_checkbox">
  <div>
    <div class="helptext">other help text</div>
    <div class="validationMessage" style="display: none;">Error message</div>
    <input id="widget_chk_I095Q7N7" type="checkbox" name="chk_I095Q7N7" required="" value="true">
    <label for="widget_chk_I095Q7N7">My checkbox</label>
  </div>
</div>