1

How can one create an element that wraps the content between two elements?

Here's a simplified example of the code I'm dealing with:

<p>
Some text some text <span class="foo">some more text</span> additional text.
</p>
<p>
I am bad at coming up with <span class="foo">fake text</span>, I should have looked it up lorem ipsum somewhere.
</p>

What I would like is that all the text between the end of the first span and the beginning of the second span to be wrapped in a div so that I can, for example, color the text differently.

Is such a thing possible? If not, are there any clever ways around this?

EDIT: I'm not entirely sure how I'd like the code to look at the end of the day. I only care about the result, which is that I'm able to apply specific styling to the text between the spans despite the fact that they have different parents. It would be really great if I could, for example, even set out the text and put a border around it, so that the end result looks something like:

Some text some text some more text

------------------------------
|additional text              |
|I am bad at coming up with   |
-----------------------------

fake text, I should have should have looked up lorem ipsum somewhere.

Jake
  • 809
  • 1
  • 8
  • 18
  • 1
    How is it possible to wrap pieces of texts of two `

    ` nodes with a single `

    ` element?
     – VisioN Mar 11 '13 at 19:35
  • No, it's not possible to have overlapping elements. – Bergi Mar 11 '13 at 19:37
  • 1
    @VisioN i would rephrase it how to wrap ending of one tag together with beginning of next tag into one tag. – vittore Mar 11 '13 at 19:37
  • May you post the result code that you need? – davidbuzatto Mar 11 '13 at 19:37
  • No, it's not; you could wrap the text following the first `.foo`, and the text preceding the second `.foo` in `div` tags (but there'll be *two* tags; and I'm not convinced that you're allowed `div` elements within a `p` anyway). – David Thomas Mar 11 '13 at 19:37
  • You'd need to wrap the text after the end of the first span ( additional text.) in a new span, and the same for the text before the start of the second span (I am bad at coming up with ). – j08691 Mar 11 '13 at 19:37
  • If you show me what you expect the output to be like i can help you more. Cause i did not really understand what you need. – Max Doumit Mar 11 '13 at 19:39
  • @MarwanDoumit Don't take it too personally ;) – VisioN Mar 11 '13 at 19:41
  • Thanks for the comments/questions. I tried to edit the question to show an example of the result I'd like to see. I suppose I'm even okay with combining the paragraphs, although I'd prefer not to if it's avoidable. – Jake Mar 11 '13 at 23:46

1 Answers1

2

This is horrible, but it's the best I could come up with:

$('p').each(function(i){
    var that = $(this),
        foo = that.find('.foo');
    if (i==0){
        var tN = foo[0].nextSibling;
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertAfter(foo);
    }
    else if (i==1){
        var tN = foo[0].previousSibling;
        console.log(tN,tN.nodeValue);
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertBefore(foo);
    }
    this.removeChild(tN);
});

JS Fiddle demo.

Slightly improved, and slightly less-horrible:

$('p').each(function(){
    var that = $(this),
        foo = that.find('.foo');
    if (that.next().find('.foo').length){
        $(foo[0].nextSibling).wrap('<span class="fooSibling"></span>')
    }
    else if (that.prev().find('.foo').length) {
        $(foo[0].previousSibling).wrap('<span class="fooSibling"></span>')
    }
});

JS Fiddle demo.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Why are you using `$(foo[0].nextSibling)`? Why not `foo.next()`? – gen_Eric Mar 11 '13 at 19:56
  • 1
    Because the last time I checked `next()` only filtered for element-nodes, and ignored `textNodes`; and [still does so far as I can tell](http://jsfiddle.net/davidThomas/z8phA/2/). – David Thomas Mar 11 '13 at 19:57
  • @mVChr, well no: but it wasn't meant to (since in the example they're explicitly in different paragraphs). – David Thomas Mar 11 '13 at 20:04
  • The second edit looks like it solves the problem I originally posed. Thanks so much! I'm going to mark it answered. One follow-up, if you don't mind: What if I wanted to wrap the text between the spans in a border (as I have in my edit). – Jake Mar 11 '13 at 23:51