CODEWITHSUNDEEP
javascriptjquery
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

how do i wrap the input with a div with jquery

I have this format

<td class="value">
<input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
</td>

and with jquery i need the final result to be this

<td class="value">
<div class="field_with_errors">
    <input type="text" size="30" name="application[name]" id="application_name" data-validate="true" class="name">
  <label style="color: rgb(204, 0, 0);" class="message" for="application_name">Required</label>
</div>
</td>

As you can see i have a wrapping div....i dont think i can achieve this with prepend. Here is my jquery so far and as you can see i have the input

 var form = $(".applications_form");
 var company_name = form.find(".name");

Upvotes: 2

Views: 4267

Answers (4)

Kamran Ali
Kamran Ali

Reputation: 5954

try this 

var $form = $(".applications_form");
 var $company_name = $form.find(".name"); 
 $company_name.wrap('<div class="field_with_errors" />');

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Have a look at jQuery.wrap()

http://api.jquery.com/wrap/

$("#application_name").wrap("<div class=\"field_with_errors\"></div>");
$("#application_name .field_with_errors").append("<label style=\"color: rgb(204, 0, 0);\" class=\"message\" for=\"application_name\">Required</label>");

The first line wraps the input with the div and the 2nd line appends the label.

Upvotes: 3

Anthony Grist
Anthony Grist

Reputation: 38345

Use the .wrapAll() function, like this:

$('td.value').children().wrapAll('<div/>');

Edit: My mistake, I thought the <label> was in the existing HTML, when it seems to be added (though there's no mention of that!). If the <input> is indeed the only existing element, you can indeed use .wrap(), then use .append() to add the <label> element afterwards.

Possibly something like this:

var company_name = $('#application_name'); // you have a unique ID, may as well make use of it!
company_name.wrap('<div/>').parent().append('<label ...>');

Upvotes: 2

Jage
Jage

Reputation: 8086

There is a wrap function for that.

Upvotes: 2

Related Questions