1

我正在准备一组演示幻灯片，每张幻灯片上都可以包含多个代码部分。我正在制作一个 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");

如何获取所选行的行号？

4

1 回答 1

1

如果要查找所选跨度的索引，可以使用index方法：

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

http://jsfiddle.net/3dkAM/

于 2013-02-19T22:32:08.387 回答