9

段落内のすべての行の先頭にjquery/javascriptに連続した行番号を挿入させ、さらに良いことに、後続の段落までシーケンスをたどることは可能ですか?

(教室で) 記事の特定の行を学生にすばやく紹介できるようにしたいと考えています。この機能を適用したい記事がたくさんありますが、それぞれにさまざまな数の段落があります。

表示デバイスに応じて段落の幅が変化し、結果として各段落の行数が増減するレスポンシブ ページでも、これが可能になることを期待していました。

助けていただける方、よろしくお願いします。

4

3 に答える 3

2

ここでは、目的に合ったアプローチの 1 つを紹介します。

  1. 参照用に、1 行の段落の高さを取得します。
  2. 各段落について、実際の高さを取得し、行数を推測します。
  3. 行をループして、絶対位置に番号を追加します。
var refHeight = $("p").eq(0).height();
$("p").eq(0).remove();
var cnt = 1;
$("p").each(function(index) {
    var pos = $(this).position();
    var h = $(this).height();
    var lines = h / refHeight;
    var lineHeight = h / lines;
    for (var i=pos.top ; i<pos.top+h ; i += lineHeight) {
        var num = $("<p>", { class: "number" });
        num.text(cnt++);
        num.css("top", i);
        $(this).before(num);
        console.log(i);
    }
});

(フィドル)

編集

固定行の長さを使用したい場合 (全員が同じ数字を見るようにするため)、上記を次のように組み合わせることができます。

  1. 段落を行に分割します。
  2. 各行を span/div で囲み、再度追加します。
  3. ブラウザでテキストの折り返しをブロックします。
$("p").each(function() {
    var text = $(this).text();
    $(this).html("");
    var i=0;
    while (i<text.length) {
        lineCharWidth = charWidth;
        while (i+lineCharWidth < text.length && text[i+lineCharWidth] != ' ') {
            lineCharWidth++;
        }
        var line = $("<span>", { class: "line" }).text(text.substr(i, lineCharWidth));
        $(this).append(line).append("<br/>");
        i += lineCharWidth;
    }
});

(フィドル)

于 2013-10-15T21:33:52.663 に答える