在元素樹中計算元素的數字位置

我準備了一組演示文稿幻燈片，每張幻燈片上可以有數量的代碼段。我正在製作一個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");

我怎樣才能選擇行的行號？

來源

2013-02-19 Ned Batchelder

如果你想找到選擇跨度的指數，你可以使用index方法：

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

http://jsfiddle.net/3dkAM/

來源

2013-02-19 22:32:08 undefined

完美！很簡單！ – 2013-02-19 22:47:26

在元素樹中計算元素的數字位置

回答

相關問題