Question

Hi I’m trying to achieve this:

<div class="content">
    <img src= />
    <img src= />
    <div class="slideshow"> <img src= /><img src= /><img src= /></div>
    Some text here
    <a href="#">Link</a>
    <i>Italic text</i>
    etc more text.
</div>

<div class="content">
    <img src= />
    <img src= />
    <div class="slideshow"> <img src= /><img src= /><img src= /></div>
    <div class="description"
        Some text here
        <a href="#">Link</a>
        <i>Italic text</i>
        etc more text.
    </div>
</div>

I have tried text nodes but it wraps all of the lines text in description divs. I’m trying to detect the first line of text until the last line of text. There will be no images, videos or slideshows after the description if that helps.

I must be missing something with the find node type=3

Any advice would be great

Answer 1

Try:

$('.project_content').each(function () {
  var tmp = [], collecting = false;

  $(this).contents().each(function () {
    if (this.nodeType === Node.TEXT_NODE && $.trim(this.nodeValue).length > 0) {
      collecting = true;
    }

    if (collecting) {
      tmp.push(this);
    }
  });

  $(tmp).wrapAll('<div class="description" />');
});

http://jsfiddle.net/6EsRL/1/ this one wraps all elements from the first text-node to the next text-node.

http://jsfiddle.net/6EsRL/3/ this one wraps all elements from the first text-node to the last child-node.