Question

<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>

我想将上面的html转换为下面给出的格式。我尝试使用jQuery .wrap()但没有成功。任何帮助或指示都会非常有用。

<div class="row">
<div class="form-group">
    <label>Name:<i class="mandate">*</i></label>
    <input type="text" class="input-lg">
</div>
<div class="form-group">
    <label>Phone:<i class="mandate">*</i></label>
    <input type="text" class="input-lg">
</div>
</div>
<div class="row">
<div class="form-group">
    <label>Age:<i class="mandate">*</i></label>
    <input type="text" class="input-lg">
</div>
<div class="form-group">
    <label>Address:<i class="mandate">*</i></label>
    <input type="text" class="input-lg">
</div>
</div>

Answer 1

你可以试试这个：

$(document).ready(function(){
    $('label').each(function(){
        var $this=$(this);
        $this.wrap( "<div class='row'><div class='form-group'></div></div>");
        var $child=$this.find('input[type="text"]');
        $child.remove();
        $this.parent().append($child);
        $this.append('<i class="mandate">*</i>');

    });
});

Demo

Answer 2

您输入的标签未关闭：

<label>Name <input type="text" name="text_2"/></label>
<label>Phone <input type="text" name="text_3"/></label>
<label>Age <input type="text" name="text_4"/></label>
<label>Address <input type="text" name="text_5"/></label>

之后请尝试（假设页面上没有其他标签）：

$("label").wrap("<div class=\"row\"><div class=\"form-group\"></div></div>");

Jquery在表单中包装特定元素的组

2 个答案: