CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
three3
three3

Reputation: 2846

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. Here is my 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:

<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">. I have tried using the following jQuery snippets but to no avail:

//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">');

Upvotes: 0

Views: 2711

Answers (4)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

Note: most of the answers, aside from your own, will not work with multiple form-groups.

Your aim appears to wrap all child elements, except the label, into a child div. If so a simple approach is literally to exclude the label with :not and then wrapAll:

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

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').each(function(){
    $('>:not(label)', this).wrapAll('<div class="col-sm-9"></div>');
});

Upvotes: 2

three3
three3

Reputation: 2846

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">');
          });

Upvotes: 0

shanidkv
shanidkv

Reputation: 1103

Try below code use

Use jQuery .nextAll() and .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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388336

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>

Upvotes: 1

Related Questions