如何使用jQuery包裝特定的多個div

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

小提琴演示

---

$('#outer div').not('#inner3')選擇具有ID的所有的div元素內outer但是用id元素inner3

---

如果你想要兩個前兩個孩子你可以使用:lt()

小提琴演示

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

---

OP評論后更新

更新了小提琴演示

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

請查看此鏈接以獲取更多信息。

從文檔：

描述：圍​​繞匹配元素集中的所有元素包裝HTML結構。

.wrapAll（wrappingElement）

wrappingElement

鍵入：Selector或htmlString或Element或jQuery

一個選擇器，元素，HTML字符串或jQuery對象，指定要包圍匹配元素的結構。

.wrapAll（功能）

功能

類型：Function（整數索引）=> String或jQuery

一個回調函數，返回HTML內容或jQuery對象以包裝匹配的元素。 接收集合中元素的索引位置作為參數。 在函數內，這指的是se中的當前元素

Answer 3

要完成Tushar Gupta的答案 ：

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

小提琴