Question

只是尝试使用jQuery wrapInner，我无法使用外部div包装特定的多个div。

$('#outer').not('#inner3')
  .wrapInner('<div id="wrapper" style="background:green;"></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='outer'>
  <div id='inner1'>1</div>
  <div id='inner2'>2</div>
  <div id='inner3'>3</div>
</div>

如何将inner1和inner2包装在另一个div中。我尝试过如上所述，但这包含了整个3个内部div。

需要输出：

<div id='outer'>
  <div id="wrapper" style="background:green;">
    <div id='inner1'>1</div>
    <div id='inner2'>2</div>
  </div>
  <div id='inner3'>3</div>
</div>

Answer 1

尝试$('#outer div').not('#inner3')

$(document).ready(function () {
    $('#outer div').not('#inner3')
        .wrapInner('<div id="hey" style="background:green;"></div>');
});

fiddle Demo

<小时/> $('#outer div').not('#inner3')选择ID为outer的元素内的所有div，但不选择ID为inner3的元素

如果您想要两个前两个孩子，您可以使用:lt()

fiddle Demo

$(document).ready(function () {
    $('#outer div:lt(2)')
        .wrapInner('<div id="hey" style="background:green;"></div>');
});

<小时/> OP评论后更新

Updated fiddle Demo

$(document).ready(function () {
    $('#outer div').not('#inner3')
        .wrapAll('<div id="hey" style="background:green;"></div>');
});

Answer 2

使用.wrapAll()功能：

$('document').ready(function() {
  $('#outer div').not('#inner3')
    .wrapAll('<div id="hey" style="background:green;"></div>');
});

查看this链接了解详情。

来自文档：

描述：围绕匹配元素集中的所有元素包装HTML结构。

.wrapAll（wrappingElement）

wrappingElement

键入：Selector或htmlString或Element或jQuery

选择器，元素，HTML字符串或jQuery对象，指定包围匹配元素的结构。

.wrapAll（功能）

功能

类型：函数（整数索引）=＆gt;字符串或jQuery

回调函数返回HTML内容或jQuery对象以包围匹配的元素。接收集合中元素的索引位置作为参数。在函数内，这指的是se
中的当前元素

Answer 3

完成Tushar Gupta's answer：

// wrapInner will add a div *inside each selected node*
$('#outer1 div').not('#inner13')
        .wrapInner('<div id="hey1" style="background:green;"></div>');

// wrap will add one wrapper around *each selected node*
$('#outer2 div').not('#inner23')
        .wrap('<div id="hey2" style="background:green;"></div>');

// to create one single wrapper, and put the divs you want inside,
// you can do as follows :
$('<div id="hey3" style="background:green;"></div>')
    .append( $('#outer3 div').not('#inner33') )
    .prependTo('#outer3');

fiddle

如何使用jQuery包装特定的多个div

3 个答案: