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>

我尝试了文本节点，但它包含了描述div中的所有行文本。我正在尝试检测第一行文本，直到最后一行文本。如果有帮助，说明后将没有图像，视频或幻灯片。

我必须找不到找到节点类型= 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

如果你的内容div中没有任何其他div而不是幻灯片显示，你可以使用它：

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

将幻灯片结尾div结束标记之后的所有内容包装到内容div的末尾，并将其包装到描述div中。 Demo

Answer 4

正如Yoshi所示，如果您找到在.wrapAll()元素之后选择节点的方法，则可以使用.slideshow。

这是另一种方法。我不知道与Yoshi的解决方案相比会有多快或多慢，但它更容易理解：

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

在内容的开头和结尾添加div

4 个答案: