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>');
});

问题是，即使只有label内的div.group被包裹起来。我想包装标签和输入，如果它们在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子项相关联，因此此解决方案更为正确：

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

之前的解决方案是对所有集合进行wrapAll（参见PeterKA小提琴）。关键是wrapInner每个家长，而不是wrapAll。

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

Answer 2

我建议的一种方法：

// iterate over each of the <input> elements using each():
$('input').each(function() {
  // find the previous <label> element sibling (if it exists),
  // add the <input> back to the selection and wrap both in the <div>:
  $(this).prev('label').addBack().wrapAll('<div class="wrapper"></div>');
});

.wrapper {
  border: 1px solid #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <label>Text:</label>
  <input type="text" />
</div>
<div class="group">
  <label>Text:</label>
</div>

参考文献：

Answer 3

这应该这样做：

$('.group:has(label+input)').each(function() {
    $(this).children('label,input').wrapAll( $('<div/>',{class:'wrapper'}) );
});

$('.group:has(label+input)').each(function() {
  $(this).children('label,input').wrapAll( $('<div/>',{class:'wrapper'}) );
});
//output new html
var newHTML = $('<div/>').html( $('.group').clone() ).html();
$('pre.out').text( newHTML );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group">
    <label>Text: </label>
    <input type="text" />
</div>

<div class="group">
    <label>Text: </label>
</div>

<div class="group">
    <label>Text: </label>
    <input type="text" />
</div>
<div class="group">
    <label>Text: </label>
</div>


<h1>NEW HTML</h1>
<pre class="out"></pre>

Answer 4

还有一个选择：

$(".group").each(function() {
    var hasLabel = $(this).children("label").length;
    var hasTxtInput = $(this).children("input[type='text']").length;

    if (hasLabel && hasTxtInput)
        $(this).find("label, input").wrapAll('<div class="wrapper"></div>');

});

Fiddle

仅当物品是两个特定元素时才包裹物品

4 个答案: