Question

我有一段充满YouTube视频的内容，而我正试图在按时间顺序连续显示新段落之前或之后提取包含任何文本的内容。即：

<div>
    <p>before <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> middle 1 <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> middle 2 <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> after</p>
</div>

应该是：

<div>
    <p>before</p>
    <p><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a></p>
    <p>middle 1</p>
    <p><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a></p>
    <p><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a></p>
    <p>middle 2</p>
    <p><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a></p>
    <p>after</p>
</div>

不幸的是，我所拥有的东西会弄乱订单并为每个YouTube创建单独的div，而不是将所有内容整合到一个div中。

http://jsfiddle.net/frank_o/kyrmq3cn/

$(function () {
    $('.youtube').each(function () {
        var elem = $(this),
            parent = elem.parent(),
            parentContainer = parent.parent(),
            content = parent.contents(),
            index = content.index(this),
            before = content.slice(0, index),
            after = content.slice(index + 1),
            beforeText = before.text(),
            afterText = after.text();

        var beforeOut = $('<p/>').text(beforeText || ''),
            youtubeOut = $('<p/>').append(elem.clone()),
            afterOut = $('<p/>').text(afterText || ''),

            resultDiv = $('<div/>');

        resultDiv.append(beforeOut);
        resultDiv.append(youtubeOut);
        resultDiv.append(afterOut);

        resultDiv.css('border', '5px solid blue');
        resultDiv.insertAfter(parentContainer);

        parentContainer.css('opacity', '0.2')
    });
});

Answer 1

这应该这样做。迭代div p的内容并将每个内容包装在p元素中，最后删除空的div p - 第一个元素。

＆＃13;

$(function() {
  $('div p').contents().each(function() {
    $(this).closest('div').append( $('<p/>').html( this )[0] );
  });
  $('div p:empty').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <p>before <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> middle 1 <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a><a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> middle 2 <a class="youtube" href="https://www.youtube.com/watch?v=a5z69NLAdCo"><img src="http://i.ytimg.com/vi/a5z69NLAdCo/hqdefault.jpg"></a> after</p>
</div>

＆＃13;

从一个段落中提取元素和文本并插入另一个段落

1 个答案: