CODEWITHSUNDEEP
javascriptjquerytext
uriah
uriah

Reputation: 2573

add div at start and end of content

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

Upvotes: 1

Views: 296

Answers (4)

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59101

As Yoshi showed, you can use .wrapAll() if you find a way to select nodes after the .slideshow element.

Here's another way to do that. I don't know how fast or slow it will be in comparison to Yoshi's solution, but it is simpler to understand:

var contents = $(".content").contents(); // Selects all nodes, including textual
var slideshowIndex = contents.index($(".slideshow"));
contents
  .slice(slideshowIndex + 1)
  .wrapAll('<div class="description" />');

Upvotes: 0

Yoshi
Yoshi

Reputation: 54649

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.

Upvotes: 5

Pierre
Pierre

Reputation: 19071

Only if you can wrap the text nodes into a <p> or something; You can use:

$('.content').each(function(){
    $(this).find('.slideshow').nextAll().appendTo( $('<div class="description"></div>').appendTo( $(this) ) );
});

Upvotes: 1

MetalRain
MetalRain

Reputation: 226

If your content div doesn't have any other divs than slideshow inside of it, you can use this:

$('.content').html( $('.content').html().replace('</div>','</div><div class="description">') +'</div>' );

To wrap all content after slideshow div ending tag up to end of the content div into a description div. Demo

Upvotes: 0

Related Questions