добавить div в начале и конце содержимого

Question

Привет, я пытаюсь добиться этого:

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

Я пробовал текстовые узлы, но он оборачивает все строки текста в описании divs.Я пытаюсь обнаружить первую строку текста до последней строки текста.Там не будет изображений, видео или слайд-шоу после описания, если это поможет.

Я, должно быть, что-то упускаю с типом узла поиска = 3

Любой совет будет отличным

Answer 1

Попробуйте:

$('.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/ этот оборачивает все элементы от первого текстового узла до следующего текстового узла.

http://jsfiddle.net/6EsRL/3/ этот оборачивает все элементы от первого текстового узла до последнего дочернего узла.

Answer 2

Только если вы можете обернуть текстовые узлы в <p> или что-то ;Вы можете использовать:

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

Answer 3

Как показал Йоши, вы можете использовать .wrapAll(), если найдете способ выбрать узлы после элемента .slideshow.

Вот еще один способ сделать это. Я не знаю, насколько быстро или медленно это будет по сравнению с решением Йоши, но проще понять:

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

Answer 4

Если ваш контентный div не имеет каких-либо других div, кроме слайд-шоу внутри него, вы можете использовать это:

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

Чтобы обернуть весь контент после тега слайд-шоу, заканчивающегося тегом вверхдо конца содержимого div в описание div. Демо