js STUDIO

.wrapInner()

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

.wrapInner( wrappingElement ) 1.2追加

戻り値:jQuery

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

.wrapInner( function(index) ) 1.4追加

戻り値:jQuery

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

サンプル

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

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

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

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

マッチした要素内のコンテンツをそれぞれが指定したDIVで囲まれます。

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

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

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

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

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

デモ

各P要素の中身に対してB要素で囲っています。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:#bbf; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは！</p>
<script>$("p").wrapInner("<b></b>");</script>
</body>
</html>

BODYに対して、wrapInnerに多階層の要素を指定して実行しています。 

<!DOCTYPE html>
<html>
<head>
<style>
 div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
BODYのテキストです。
<script>
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
</script>
</body>
</html>

jQueryで生成した要素で、マッチした要素を囲います。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:#9f9; }
  .red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは！</p>
<script>$("p").wrapInner($("<span class='red'></span>"));</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM