对wrapInner返回感到困惑

Question

我正在尝试创建一个新的列表项，然后使用wrapInner几层HTML来生成这个HTML，

            <li>
                <div class="form-group">
                    <label for="textArea" class="col-sm-2 control-label">Text Area</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-align-justify "></span></span>
                        <textarea class="form-control" id="textArea" placeholder="text"></textarea>
                        </div>
                    </div>
                </div>
            </li>

我遇到链接wrapInner的问题看起来似乎wrapInner返回选择器而不是新的html是否有办法实现我想要的效果？

http://jsfiddle.net/hpueb/1/

Answer 1

而不是：

$(li).appendTo('.results').wrapInner(formGroup).wrapInner(label);

我认为你需要：

$(li).appendTo('.results').wrapInner(formGroup.wrapInner(label));

每个链式方法始终应用于原始选择器结果（在您的情况下，<li>元素）。

你拥有它的方式，<li>包裹了<div>，然后由<label>包裹，所以你得到：

<li><label><div /></label></li>

您希望首先使用<label>包装<div>，然后使用<li>包装该结果，如上所示。