1

プレゼンテーションスライドのセットを準備しています。各スライドには、コードのいくつかのセクションを含めることができます。コードの個々の行を強調表示し、強調表示を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>

2番目のスライド（3つのうち）はアクティブな表示スライドであり、そのスライドでは、2番目のコードセクションの中央の行が選択されています（強調表示されています）。

次のように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 に答える