在元素树中计算元素的数字位置

Question

我准备了一组演示文稿幻灯片，每张幻灯片上可以有 数量的代码段。我正在制作一个jQuery插件，让我突出显示单独的代码行，并向下移动突出显示和 。

这里的标记的一个例子：

<div class='slide'> 
    <div class='section'> 
     <span class='line'>Line 1</span> 
     <span class='line'>Line 2</span> 
    </div> 
    <div class='section'> 
     <span class='line'>Line 3</span> 
     <span class='line'>Line 4</span> 
    </div> 
    <div class='section'> 
     <span class='line'>Line 5</span> 
     <span class='line'>Line 6</span> 
    </div> 
</div> 


<div class='slide active'> 
    <div class='section'> 
     <span class='line'>Line 1</span> 
     <span class='line'>Line 2</span> 
    </div> 
    <div class='section'> 
     <span class='line'>Line 3</span> 
     <span class='line selected'>Line 4</span> 
     <span class='line'>Line 5</span> 
    </div> 
    <div class='section'> 
     <span class='line'>Line 6</span> 
     <span class='line'>Line 7</span> 
    </div> 
</div> 


<div class='slide'> 
    <div class='section'> 
     <span class='line'>Line 1</span> 
     <span class='line'>Line 2</span> 
    </div> 
    <div class='section'> 
     <span class='line'>Line 3</span> 
     <span class='line'>Line 4</span> 
    </div> 
</div> 

第二滑动（三个）是有源可见滑动，并且在滑动时，选择 所述第二代码部分的中间线（高亮） 。

我可以按编号使用jQuery这样选择线路：

var the_line = $(".slide.active").find("span.line")[lineno-1]; 

我似乎什么不能做的是计算出当前所选行的行号。 我尝试这样计算有多少行被选择的一个下面，但它只是 单节内的作品：

var following_lines = $(".slide.active").find("span.line.selected").nextAll("span.line"); 

我怎样才能选择行的行号？

Answer 1

如果你想找到选择跨度的指数，你可以使用index方法：

var $lines = $('.slide.active').find('span.line'), 
    index = $lines.index($lines.filter('.selected')) // 3 

http://jsfiddle.net/3dkAM/