jQueryでwrapできない。

Question

<script>
  $(function() {
    var hotelpics = $("<div>", {
      "class": "hotelpics"
    });
    var mainpic = $("<div>", {
      "class": "mainpic"
    });
    var others = $("<div>", {
      "class": "others"
    });
    var hotelinfo = $("<div>", {
      "class": "hotelinfo"
    });
    var hotelname = $("<h2>", {
      "class": "hotelname"
    });
    var tags = $("<div>", {
      "class": "tags"
    });
    var rating = $("<div>", {
      "class": "rating"
    });
    var price = $("<div>", {
      "class": "price"
    });
    hotelpics.append(mainpic, others);
    hotelinfo.append(hotelname, tags, rating, price);
    console.log(hotelpics.add(hotelinfo));
    console.log(hotelpics.wrap('<div>'));
});
</script>

このコードを実行すると１つ目のconsole.log()の結果は以下となります。これは希望している形なので問題ありません。

<!--兄弟要素が並んでいる-->
<div class="hotelpics">
<div class="mainpic"></div>
<div class="others"></div>
</div>

<div class="hotelinfo">
<h2 class="hotelname"></h2>
<div class="tags"></div>
<div class="rating"></div>
<div class="price"></div>
</div>

この2つの兄弟要素を囲うdiv要素をつけるためにwrap()をしましたが表示結果がこの様になります。

<div class="hotelpics">
<div class="mainpic"></div>
<div class="others"></div>
</div>

以下の要素がなくなり、divも挿入されていません。

<div class="hotelinfo">
<h2 class="hotelname"></h2>
<div class="tags"></div>
<div class="rating"></div>
<div class="price"></div>
</div>

以下が希望の値です。

<div class="">
  <div class="hotelpics">
  <div class="mainpic"></div>
  <div class="others"></div>
  </div>

  <div class="hotelinfo">
  <h2 class="hotelname"></h2>
  <div class="tags"></div>
  <div class="rating"></div>
  <div class="price"></div>
  </div>
</div>

機能しない理由としては、兄弟要素が2つ並んでいるからでしょうか。

Comments

[wwbQzhMkhhgEmhU]

ドキュメントを良く読めば分かりそうな気がします。

Answer 1

 $('.hotelpics,.hotelinfo').wrapAll('<dic>');