Jquery：检查第一个实例

在获取奇怪的输出并将其转换为可读的剧本格式时遇到一些麻烦。

这是 HTML。

<div>
<p class="actor">John</p>
<p class="line">I want to buy milk.</p>
<p class="actor">John</p>
<p class="line">Milk is expensive.</p>
<p class="dirNote">John grabs the milk</p>
<p class="actor">John</p>
<p class="line">I guess its fine.</p>
<p class="actor">Steve</p>
<p class="line">Yeah.</p>
</div>

我尝试解决这个问题失败了。但基本思想是这样的......

循环遍历 p.actor 的每个实例
将第一个实例存储为 var

根据 var 检查下一个实例

如果它们相同

将该实例的 p.line 内容追加到 var 的 p.line 中

否则替换变量

与新演员

另外，如果遇到 p.dirNote p.actor 的下一个实例会设置新的 var

基本上完成后 html 应该看起来像这样

<div>
<p class="actor">John</p>
<p class="line">I want to buy milk. Milk is expensive.</p>
<p class="dirNote">John grabs the milk</p>
<p class="actor">John</p>
<p class="line">I guess its fine.</p>
<p class="actor">Steve</p>
<p class="line">Yeah.</p>
</div>

关于可行性有什么想法吗？谢谢。

下面的代码片段应该可以解决问题。它基本上将集合转换为数组，并从集合中的最后一个元素开始。

$('p.actor').toArray().reverse().forEach(function (el) {
    var 
        $this = $(el), 
        $prev = $this.prev().prev('.actor'), 
        $line
    ;

    if ($this.text() !== $prev.text()) {
        return;
    }

    $line = $this.next('.line');
    $prev.next('.line').append(' ' + $line.text());
    $this.add($line).remove();
});

http://jsfiddle.net/j9qwzyzq/ http://jsfiddle.net/j9qwzyzq/