Question

我有这种格式

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

并且使用jquery我需要最终结果为

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

正如你所看到我有一个包装div ....我不认为我可以通过前置实现这一点。到目前为止，这是我的jquery，你可以看到我有输入

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

Answer 1

看一下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>");

第一行用div包装输入，第二行附加标签。

Answer 2

有一个wrap功能。

Answer 3

使用.wrapAll()功能，如下所示：

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

编辑：我的错误，我认为<label>在现有的HTML中，当它似乎被添加时（虽然没有提到它！）。如果<input>确实是唯一的现有元素，您确实可以使用.wrap()，然后使用.append()添加<label>元素。

可能是这样的：

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

Answer 4

试试这个

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

我如何使用带有jquery的div包装输入

4 个答案: