javascript - jQuery 选择元素和下一个一起

Question

我有一个自动生成的 HTML，我想将元素组合在一起。

输入HTML:

<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>

<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>

<!-- more like above -->

期望的输出:

<div class="form-group">
    <div class="editor-label"><label for="StringField">StringField</label></div>
    <div class="editor-field"><input id="StringField" type="text" value="" /></div>
</div>

<div class="form-group">
    <div class="editor-label"><label for="IntField">IntField</label></div>
    <div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>
</div>

我正在尝试使用 jQuery 的下一个选择器来获取这些组，然后将它们包装起来，但是我无法将要选择的项目与 wrap() 一起使用。我不确定我是否可以编写一个选择器来获得它，或者我是否需要迭代地完成它。以下是我尝试过的一些选择器。

//selects just the labels
$('.editor-label')

//returns only the .editor-fields
$('.editor-label +  .editor-field')

//returns all 4 elements separately
$('.editor-label, .editor-label +  .editor-field')

我可以使用什么选择器来选择元素 (.editor-label) 和下一个 (.editor-field) 作为一个“元素”？

Answer 1

您将需要在 a for each 中进行选择，而不是单独使用选择器。

$(".editor-label").each(function() {
    var lab = $(this);
    var inp = $(lab).next();
    lab.add(inp).wrapAll('<div class="wrapper"/>');
});

.wrapper { border: 2px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>

<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>