Question

我试图围绕div包装两个元素，但我的代码没有按预期工作。这是我的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>

以下是我希望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>

如您所见，我正在尝试将input和span标记包装在<div class="col-sm-9">中。我尝试使用以下jQuery代码段，但无济于事：

//This only wraps the span
$("#form-group input").next().wrap('<div class="col-sm-9">');

我也试过这个：

//This only wraps the input
$("#form-group input").wrap('<div class="col-sm-9">');

Answer 1

注意：除了您自己的答案之外，大多数答案不会与多个form-group一起使用。

您的目标似乎是将除标签之外的所有子元素包装到子div中。如果是这样，一个简单的方法就是用:not然后wrapAll排除标签：

$('.form-group').each(function(){
    $(':not(label)', this).wrapAll('<div class="col-sm-9"></div>');
});

JSFiddle： http://jsfiddle.net/6by51ytL/1/

注意：如果您的form-group中有更深层次的嵌套子项，请添加直接子选择器（>）：

$('.form-group').each(function(){
    $('>:not(label)', this).wrapAll('<div class="col-sm-9"></div>');
});

Answer 2

您可以使用多个选择器选择两个元素，然后

$(".form-group").find('input, span').wrapAll('<div class="col-sm-9">');
//class selector is used for `form-group`

＆＃13;

$(".form-group").find('input, span').wrapAll('<div class="col-sm-9">');

＆＃13;

<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>

＆＃13;

Answer 3

尝试以下代码使用

使用jQuery .nextAll()和.wrapAll()

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

$('.control-label').nextAll().wrapAll('<div class="col-sm-9" />');

<强> JSFIDDLE DEMO

Answer 4

我明白了。这段代码适合我：

$('.form-group input').each(function () {
    $(this).next('span.help').andSelf().wrapAll('<div class="col-sm-9">');
          });

使用jQuery在DIV中包装两个HTML元素

4 个答案: