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

您将需要在每个选项中进行选择而不是选择器本身。

$(".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>

Answer 2

试试这个

$('.editor-label').each(function(){
   var group = $(this).next().addBack().wrapAll('<div class="form-group"></div>');
});

Answer 3

使用.each()，.addBack()和.wrapAll()

<强> jsBin demo

$('.editor-label').each(function(){
  $(this).next(".editor-field").addBack().wrapAll("<div class='form-group'/>");
});

.each()将定位回调内的所有所需元素，找到.next(".editor-field")，在所需元素中添加启动选择器（当前.editor-label）和wrapAll()

Answer 4

您可以使用 jQuery siblings方法：

$(".editor-label").siblings(".editor-label")

Answer 5

看看这是否有效。

var fields = $('.editor-field');
$.each(fields, function(index, obj){
    var field = $(obj);
    var label = field.prev('.editor-label');
    field.wrap('<div class='form-group'></div>').before(label);
});

jQuery选择元素和下一个

5 个答案: