Jquery：检查一下 [英] Jquery: Check against first instance

问题描述

所以这里是HTML。

 < div> 
< p class =actor> John< / p> 
< p class =line>我想购买牛奶。< / p> 
< p class =actor> John< / p> 
< p class =line>牛奶很贵。< / p> 
< p class =dirNote>约翰抓住牛奶< / p> 
< p class =actor> John< / p> 
< p class =line>我猜它很好。< / p> 
< p class =actor> Steve< / p> 
< p class =line>是的。< / p> 
< / div> 
  

我的解决方案失败了。但基本的想法是... ...

通过p.actor的每个实例循环

将第一个实例存储为var

如果它们相同，则检查针对var的下一个实例

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

else else var

with new p.actor

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

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

 < div> 
< p class =actor> John< / p> 
< p class =line>我想买牛奶。牛奶很贵。< / p> 
< p class =dirNote>约翰抓住牛奶< / p> 
< p class =actor> John< / p> 
< p class =line>我猜它很好。< / p> 
< p class =actor> Steve< / p> 
< p class =line>是的。< / 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/

Having some trouble with this with taking a weird output and turning it into readable screenplay format.

So here is the 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>

My attempts have solving this have failed. but the basic idea is this...

loop through each instance of p.actor
store first instance as a var

check next instance against var

if they are the same

append contents of that instance's p.line into the p.line of var

else replace var

with new p.actor

Also, if encounter a p.dirNote next instance of p.actor sets new var

basically when finished the html should look like this

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

Any thoughts on feasibility? Thank you.

解决方案

The following snippet should do trick. It basically coverts the collection into an array and starts from the last element in the set.

$('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/

这篇关于Jquery：检查一下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！