jQuery在< hr>之间包装文本和元素标签 [英] jQuery wrapping text and elements between <hr> tags

问题描述

我需要包装两个<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')之类的方法，因为这将不会选择未加标签的文本.

解决方案

已更新

我比以前更喜欢此版本: 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()获取其所有节点，然后对它们进行过滤，跟踪何时找到起点和终点，并仅返回它们之间的元素. /p>

然后我们用.wrapAll()用div.content包裹它们.

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

---

:如果要包装多个集合，请尝试以下操作: http: //jsfiddle.net/LbmCg/1/

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

I need to wrap everything, including free text, that is between two <hr> elements.

Given this source:

<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>

I need to wrap everything between the hr.begin and hr.end tags, like so:

<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>

I cannot use a method like .nextUntil('hr.end') because this will not select the untagged text.

解决方案

Updated

I like this version better than my previous: http://jsfiddle.net/LbmCg/3/

(Partly inspired from the answer J-P gave.)

$('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" />');
});

---

Original answer

Try this: http://jsfiddle.net/LbmCg/

If there's more than one set to wrap, there will some adjustment needed.

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's .contents() returns all nodes including text nodes. So here we traverse to the .parent() of the hr.begin, get all of its nodes using .contents() then filter through them, tracking when we've found the beginning and the end, and only returning the elements between them.

Then we use .wrapAll() to wrap them with the div.content.

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

---

EDIT: If there are multiple sets to wrap, try this: http://jsfiddle.net/LbmCg/1/

EDIT: Cleaned things up a little in both examples.

这篇关于jQuery在< hr>之间包装文本和元素标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！