js STUDIO

.wrap()

マッチした各要素を、指定した別エレメントでそれぞれ囲います。

.wrap( wrappingElement ) 1.0追加

戻り値:jQuery

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

.wrap( function(index) ) 1.4追加

戻り値:jQuery

引数 説明
function(index) マッチしている要素を囲う要素を戻り値として返す関数を指定します。
index
マッチした要素のインデックス番号

サンプル

次のようなコードがあった場合、 

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

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

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

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

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

下記のように引数に関数を指定した場合、 

$('.inner').wrap(function(index) {
  return '<div title="' + $(this).text() + '" />';
});

マッチした要素の各テキストを取り出して、動的に使用することが出来ます。

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

デモ

P要素に対してDIV要素をwrapしています。 

<!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").wrap("<div></div>");</script>
</body>
</html>

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

<!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").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
</body>
</html>

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

<!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").wrap($(".doublediv"));</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM