在多個div中添加父div

Question

我想添加一個父div。

<div id="faceone"><img src=""></div> 

<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

這些是四個div，我想在它們上面添加一個父div。我想這

$('#faceone').wrapAll('<div class="cubeSpinner">'); 

但是這是在加入cubeSpinner以上faceone只有

<div class="cubeSpinner"> 

<div id="faceone"><img src=""></div> 

</div> 
<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

但我想結果應該是這樣的

<div class="cubeSpinner"> 

<div id="faceone"><img src=""></div> 

<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

</div> 

Answer 1

您需要選擇，以便所有元素爲他們包裹。我建議增加一個通用類給他們，但在此期間，你可以使用attribute selector[id^="face"]選擇與id屬性與「面子」開始的所有元素：

$('[id^="face"]').wrapAll('<div class="cubeSpinner"></div>'); 

Answer 2

我已經上顯示這個例子JSfiddle https://jsfiddle.net/azu2s4r9/

您應該爲此使用.wrapAll（）jquery函數，併爲四個現有的<div>標記中的每一個添加一個公共類名稱。您的新原始代碼將如下所示。

<div id="faceone" class="test"><img src=""></div> 
<div id="facetwo" class="test"><img src=""></div> 
<div id="facethree" class="test"><img src=""></div> 
<div id="facefour" class="test"><img src=""></div> 

然後你的jQuery代碼應該看起來像這樣。

$('.test').wrapAll('<div class="cubeSpinner">Testing</div>'); 

生成的代碼看起來像這樣，這就是你想要它完成。

<div class="cubeSpinner">Testing 
<div id="faceone" class="test"><img src=""></div> 
<div id="facetwo" class="test"><img src=""></div> 
<div id="facethree" class="test"><img src=""><div> 
<div id="facefour" class="test"><img src=""></div> 
</div> 

這提供了一個完整的解決方案，應該在幾乎所有的情況下工作。祝你好運！