jQuery 在 标签之间包裹文本和元素

Question

我需要包装两个 <hr> 之间的所有内容，包括自由文本。元素。

鉴于此来源:

<hr class=begin>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <a href=mauris.html>Mauris</a> id diam turpis, et faucibus nunc.
  <div><img src=foo.png /></div>
<hr class=end>

我需要将 hr.begin 之间的所有内容包装起来和hr.end标签，像这样:

<hr class=begin>
  <div class=content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <a href=mauris.html>Mauris</a> id diam turpis, et faucibus nunc.
    <div><img src=foo.png /></div>
  </div>
<hr class=end>

我无法使用像 .nextUntil('hr.end') 这样的方法因为这不会选择未标记的文本。

Answer 1

已更新

我比之前的版本更喜欢这个版本:http://jsfiddle.net/LbmCg/3/

(部分灵感来自J-P给出的答案。)

$('hr.begin').each(function(){
    var $set = $();
    var nxt = this.nextSibling;
    while(nxt) {
        if(!$(nxt).is('hr.end')) {
            $set.push(nxt);
            nxt = nxt.nextSibling;
        } else break;
    } 
   $set.wrapAll('<div class="content" />');
});

<小时/>

原始答案

试试这个:http://jsfiddle.net/LbmCg/

如果要包装多于一组，则需要进行一些调整。

var foundBegin = false;
var foundEnd = false;

$('hr.begin').parent()
    .contents()
    .filter(function() {
        if($(this).is('hr.begin')) {
            foundBegin = true;
        }
        if($(this).is('hr.end')) {
            foundEnd = true;
        }
        return foundBegin && !foundEnd;
    })

    .wrapAll('<div class="content"/>');​

jQuery 的 .contents() 返回所有节点，包括文本节点。所以这里我们遍历到hr.begin的.parent()，使用.contents()获取其所有节点，然后过滤它们，跟踪我们何时找到开始和结束，并且只返回它们之间的元素。

然后我们使用.wrapAll()将它们与div.content包裹起来。

• http://api.jquery.com/contents/
• http://api.jquery.com/filter/
• http://api.jquery.com/is/

<小时/>

编辑:如果有多组要换行，请尝试以下操作:http://jsfiddle.net/LbmCg/1/

编辑:在两个示例中都进行了一些清理。