js STUDIO

.wrapAll()

マッチした要素全てを、指定した別エレメントで囲います。

.wrapAll( wrappingElement ) 1.2追加

戻り値:jQuery

引数 説明
wrappingElement マッチしている要素を囲う要素を指定します。 HTML文字列、セレクタ、jQueryオブジェクト、DOM要素のいずれかが使用できます。

サンプル

.wrapはマッチした囲む対象の要素が複数あった場合にそれぞれの要素を囲うように動作しますが、 .wrapAllはマッチした要素をグループとみなし、そのグループを囲うように動作します。 次のようなコードがあった場合、 

<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

下記の処理を実行すると、

$('.inner').wrapAll('<div class="new" />');

マッチした要素それぞれが指定したDIVで囲まれます。

<div class="container">
  <div class="new">
    <div class="inner">こんにちは</div>
    <div class="inner">さようなら</div>
  </div>
</div>

デモ

P要素をまとめてDIV要素で囲います。 

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは！</p>
<script>$("p").wrapAll("<div></div>");</script>
</body>
</html>

各SPAN要素に対して、階層になっている要素をwrapAllの引数に指定して実行しています。 

<!DOCTYPE html>
<html>
<head>
<style>
  body {font-size:14px;}
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>SPAN要素</span>
<strong>STRONG要素</strong>
<span>もう一つのSPAN要素</span>
<script>$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script>
</body>
</html>

wrapAllの引数に存在している要素をセレクタで指定しています。 セレクタで指定された要素が移動することなく、コピーされていることに注目してください。 

<!DOCTYPE html>
<html>
<head>
<style>
  body {font-size:12px;}
  div { border: 1px solid blue; margin:1px; padding:1px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:2px; font-size:12px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは！</p>
<div class="doublediv"><div></div></div>
<script>$("p").wrapAll($(".doublediv"));</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM