Question

是否可以用jQuery包装多个元素？

<div id="container">
    <h3>header</h3>
    <p>content</div>
    <div>some other content</div>
</div>

我想在h3和p周围包裹一些内容，使之像这样：

<div id="container">
    <div class="row">
       <div class="col-1">
           <i class="fas fa-check">
       </div>
       <div class="col-11">
           <h3>header</h3>
           <p>content</div>
       </div>
    </div>
    <div>some other content</div>
</div>

Answer 1

jQuery提供了wrapAll方法：

.wrapAll（）函数可以采用可以传递给$（）函数的任何字符串或对象来指定DOM结构。该结构可以嵌套在几层深处，但应仅包含一个最里面的元素。该结构将作为一组匹配元素包裹在匹配元素集中的所有元素。 http://api.jquery.com/wrapall/

因此您可以执行以下操作：

$('#container').find('h3,p').wrapAll('<div class="col-11"/>');

，然后使用prepend()和wrap()将添加的其他元素放入row div中。

Answer 2

您可以通过合并将浅层jquery对象中的jquery对象合并，然后克隆您的选择，删除原始对象，然后将克隆添加到新元素中：

var jqEl = $.merge( $('h3'), $('p') );
var cloneJq = jqEl.clone();

jqEl.remove();
$("#container").append($("<div class='col-xs-12' />").html(cloneJq));

Answer 3

可以使用 wrapAll() 和 prependTo() 来实现，例如：

var target = $("h3,p");
var extra_div = $('<div class="col-1">').append('<i class="fas fa-check"/>');

target.wrapAll($('<div class="row"/>'));
target.wrapAll($('<div class="col-11"/>'));
$(extra_div).prependTo($(".row"));

console.log($('#container')[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h3>header</h3>
  <p>content</p>
  <div>some other content</div>
</div>

Answer 4

您可以使用jquery来做到这一点

        var container = $('#container').html();
        $('#container').html('<div class="row">' +
            '   <div class="col-1">' +
            '       <i class="fas fa-check">' +
            '   </div>' +
            '   <div class="col-11">');
        $('#container').append(container);
        $('#container p').after('</div>');
        $('#container').append('</div>');

这是jsfiddle https://jsfiddle.net/u6kp0fto/

上的代码

包装多个元素

4 个答案: