[英]Wrap two HTML elements in DIV with jQuery
I am trying to wrap two elements around a div, but my code is not working as expected. 我正在尝试将两个元素包装在div周围,但是我的代码无法正常工作。 Here is my HTML:
这是我的HTML:
<div class="form-group requiredField">
<label for="password" class="col-sm-3 control-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
<span class="help">help text</span>
</div>
Here is what I want my HTML to look like: 这是我想要的HTML外观:
<div class="form-group requiredField">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="password" name="password">
<span class="help">help text</span>
</div>
</div>
As you can see, I am trying to wrap the input
and span
tags in a <div class="col-sm-9">
. 如您所见,我正在尝试将
input
和span
标签包装在<div class="col-sm-9">
。 I have tried using the following jQuery snippets but to no avail: 我尝试使用以下jQuery代码段,但无济于事:
//This only wraps the span
$("#form-group input").next().wrap('<div class="col-sm-9">');
I have also tried this: 我也尝试过这个:
//This only wraps the input
$("#form-group input").wrap('<div class="col-sm-9">');
Note: most of the answers, aside from your own, will not work with multiple form-group
s. 注意:除您自己的答案外,大多数答案都不适用于多个
form-group
。
Your aim appears to wrap all child elements, except the label , into a child div. 您的目标似乎是将除标签外的所有子元素包装到一个子div中。 If so a simple approach is literally to exclude the label with
:not
and then wrapAll
: 如果是这样,一种简单的方法实际上是使用
:not
排除标签,然后使用wrapAll
:
$('.form-group').each(function(){
$(':not(label)', this).wrapAll('<div class="col-sm-9"></div>');
});
JSFiddle: http://jsfiddle.net/6by51ytL/1/ JSFiddle: http : //jsfiddle.net/6by51ytL/1/
Note: should you ever have deeper nested children in your form-group
, add the immediate child selector ( >
): 注意:如果您在
form-group
有更深层的嵌套子级,请添加直接子级选择器( >
):
$('.form-group').each(function(){
$('>:not(label)', this).wrapAll('<div class="col-sm-9"></div>');
});
You can select both the elements using multiple selector then 您可以使用多个选择器选择两个元素,然后
$(".form-group").find('input, span').wrapAll('<div class="col-sm-9">');
//class selector is used for `form-group`
$(".form-group").find('input, span').wrapAll('<div class="col-sm-9">');
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script> <div class="form-group requiredField"> <label for="password" class="col-sm-3 control-label">Password</label> <input type="password" class="form-control" id="password" name="password" required="" style="width:50%;"> <span class="help">help text</span> </div>
Try below code use 尝试以下代码使用
Use jQuery .nextAll() and .wrapAll() 使用jQuery .nextAll()和.wrapAll()
HTML 的HTML
<div class="form-group requiredField">
<label for="password" class="col-sm-3 control-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
<span class="help">help text</span>
</div>
jQuery jQuery的
$('.control-label').nextAll().wrapAll('<div class="col-sm-9" />');
I figured it out. 我想到了。 This code works for me:
该代码对我有用:
$('.form-group input').each(function () {
$(this).next('span.help').andSelf().wrapAll('<div class="col-sm-9">');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.