jQuery

wrap（）

は、一致した要素のそれぞれにHTML要素をラップするために使用されます。

例えば、 

<div class="innerBox">Ip man vs Iron man</div>
<div class="innerBox">Ip man 2 vs Iron man 2</div>

‘wrapBox’のクラス名を含むdivタグでラップします。 

$('.innerBox').wrap("<div class='wrapBox'></div>");

新しい内容は次のようになります: 

<div class='wrapBox'>
   <div class="innerBox">Ip man vs Iron man</div>
</div>

<div class='wrapBox'>
   <div class="innerBox">Ip man 2 vs Iron man 2</div>
</div>

$('.innerBox').wrap("<div class='wrapBox'>TESTING</div>");

次のことを期待していますか？ 

<div class='wrapBox'>TESTING
   <div class="innerBox">Ip man vs Iron man</div>
</div>

いいえ、結果は完全に置き換えられます。ラップは、コンテンツではなくhtmlタグのみをサポートしています。 

<div class='wrapBox'>TESTING</div>

自分で試してみてください

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    .innerBox{
        padding:8px;
        border:1px solid blue;
        margin:8px;
    }
    .wrapBox{
        padding:8px;
        border:1px solid red;
        margin:8px;
    }
</style>

</head>
<body>
  <h1>jQuery wrap() example</h1>

  <div class="innerBox">Ip man vs Iron man</div>

  <div class="innerBox">Ip man 2 vs Iron man 2</div>

  <p>
  <button id="wrapButton">wrap()</button>
  <button id="reset">reset</button>
  </p>

<script type="text/javascript">

    $("#wrapButton").click(function () {

      $('.innerBox').wrap("<div class='wrapBox'></div>");

    });

    $("#reset").click(function () {
      location.reload();
    });

</script>
</body>
</html>


デモを試してください


jquery


jquery
操作