複数の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> 

これらは4つのdivで、それらの上に親divを追加します。私はこの

$('#faceone').wrapAll('<div class="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> 

上cubeSpinnerを追加することですが、私は結果があなたが順序ですべての要素を選択する必要があり、この

<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

ようにする必要がありますしたいですそれらが包まれるために。私は彼らに共通するクラスを追加することをお勧めしたい、しかし、その間に、あなたは「顔」で始まるid属性を持つすべての要素を選択するにはattribute selector[id^="face"]を使用することができます。

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

Answer 2

私はこの例を示してきましたJSfiddle https://jsfiddle.net/azu2s4r9/

これには、.wrapAll（）jquery関数を使用して、既存の4つの<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> 

これは完全な解決方法を提供し、すべてのケースでほとんど機能します。がんばろう！