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/

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

1 个答案: