javascript - how do i wrap the input with a div with jquery - Stack Overflow

admin管理员组

文章数量:1402299

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 pany_name = form.find(".name"); 

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 pany_name = form.find(".name"); 

• javascript
• jquery

Share Improve this question Follow asked Mar 6, 2012 at 16:07 Matt ElhotibyMatt Elhotiby 44.1k9191 gold badges224224 silver badges328328 bronze badges 1

• Check api.jquery./wrap – Ioannis Karadimas Commented Mar 6, 2012 at 16:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Have a look at jQuery.wrap()

http://api.jquery./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.

There is a wrap function for that.

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 pany_name = $('#application_name'); // you have a unique ID, may as well make use of it!
pany_name.wrap('<div/>').parent().append('<label ...>');

try this

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

本文标签： javascripthow do i wrap the input with a div with jqueryStack Overflow