jquery - 仅当项目是两个特定元素时才包装项目

Question

<div class="group">
    <label>Text: </label>
    <input type="text" />
</div>
<div class="group">
    <label>Text: </label>
</div>

我想将 label + input 包装在另一个 div 包装器中，如下所示:

<div class="group">
    <div class="wrapper">
        <label>Text: </label>
        <input type="text" />
    </div>
</div>
<div class="group">
    <label>Text: </label>
</div>

我试过这个:

$(".group").each(function() {
    $(this).find("label, input").wrapAll('<div class="wrapper"></div>');
});

问题是，即使 div.group 中只有 label 被包装了。如果标签和输入在 div.group 上，我想换行，但如果只有输入或标签，则不要换行。

Answer 1

不使用每个:

// get the input after the label
var $input = $('.group label + input');

// we know that before $input there is a label
$input.add($input.prev()).wrapAll('<div class="wrapper"></div>')

http://jsfiddle.net/c8wq67d4/1/

---

因为你可以有多个 .group 和一组 label + input child ，这个解决方案更正确:

var $input = $('.group label + input');
$input.add($input.prev()).parent().wrapInner('<div class="wrapper"></div>');

以前的解决方案是对所有集合执行 wrapAll(请参阅 PeterKA fiddle)。重点是 wrapInner 每个父级而不是它们的 wrapAll。

http://jsfiddle.net/c8wq67d4/4/