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

Jquery wrap group of specific elements in form

本文关键字：一组 元素 表单 包裹 Jquery      更新时间：2023-09-26
<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>

你可以试试:

$(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>');
    });
});
演示

您的输入标签未关闭:

<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>");
相关文章：