如何用jQuery包裝div標簽中的各種元素？

Question

我有一個看起來像這樣的html結構：

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

總而言之，它只是一些包含在它們下面的內容的標題，我只需要在div中的標題標記下方的所有內容，如下所示：

<h5>Title</h5>
<div>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</div>

我已經嘗試過使用jQuery的.wrap函數，但沒有運氣，因為標題標簽下面可以有多個類型元素，我發現這個問題： jQuery包裝div中的元素集非常相似但是不能適應它成為我需要的，任何人都可以幫助我嗎？

提前致謝！

Answer 1

做這個：

$(document).ready(function () {
    $('h5').each(function () {
        $(this).nextUntil('h5').wrapAll('<div class="box"></div>');
    })
})

Answer 2

你可以試試這個：

http://jsfiddle.net/GGjXN/1/

$(function() {
    $('h5').each(function(i, e) {
        $(e).nextUntil('h5').wrapAll('<div>');
    });
});

Answer 3

嘗試這個

var $div;
$("h5").each(function(){
  $div = $("<div />");

  if($(this).nextAll("h5").length){
   $(this).after($div.append($(this).nextUntil("h5")));
  }
  else{
    $(this).after($div.append($(this).siblings()));
  }

});

Answer 4

我會在h5之后在頁面中粘貼div，然后手動將元素插入其中。

假設一切都在內部，例如body標簽（未經測試！）：

<body>
    <h5>Title</h5>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</body>

var children = $(document.body).children(),
    $child
    $div;

for(var x = 0, child; child = children[x++];) {
    $child = $(child);
    if($child.is('h5')) {
        $div = $('<div></div>').after($child);
    } else {
        $child.appendTo($div);
    }
}

如何用jQuery包裝div標簽中的各種元素？

問題描述

4 個解決方案

解決方案1
8 2011-08-04 06:08:41

解決方案2
7 已采納 2011-08-04 06:12:01

解決方案3
2 2011-08-04 06:01:15

解決方案4
1 2011-08-04 05:57:31

如何用jQuery包裝div標簽中的各種元素？

問題描述

4 個解決方案

解決方案1 8 2011-08-04 06:08:41

解決方案2 7 已采納 2011-08-04 06:12:01

解決方案3 2 2011-08-04 06:01:15

解決方案4 1 2011-08-04 05:57:31

解決方案1
8 2011-08-04 06:08:41

解決方案2
7 已采納 2011-08-04 06:12:01

解決方案3
2 2011-08-04 06:01:15

解決方案4
1 2011-08-04 05:57:31