[英]JQuery wrap span around elements
I have the following html markup:我有以下 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>
For all checkboxes with class widget_type_checkbox
I want to wrap the input and label inside a span as follows:对于所有具有类
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>
The following doesn't work:以下不起作用:
$(".widget_type_checkbox").find("> div > span").not(":has(span)").find('input').next().andSelf().wrap('<span>');
andSelf()
deprecated, use .addBack()
instead. andSelf()
已弃用,请改用.addBack()
。
wrap()
wraps all elements separately, use wrapAll()
instead. wrap()
包装所有元素,请改用wrapAll()
。
"> div > span"
selector starts with >
is invalid "> 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.