通过 JavaScript 获取 html 中的行号

Get line number in html by JavaScript

本文关键字：html JavaScript 获取 通过      更新时间：2023-09-26

我已经突出显示了CodeRay的Ruby代码，现在我想知道用户点击了哪个行号。此行号应对应于源代码中的行 nuber。哪种方法最好？

这是我解决这个问题的方法。我通过CodeRay生成了带有数字的html。但是CodeRay在官方网站上没有准确的文档，所以在浏览了CodeRay的代码后，我把它做了这样：

content = CodeRay.scan(file.read, :ruby).div(:css => :class, 
                                                 :line_numbers => :inline)

在我的情况下，模式:line_numbers => :table无法正常工作，我应该使用:inline模式。如果你不喜欢html页面中的数字，我想你可以通过css或javascript删除它。然后我写了小的javascript函数：

$('span').not('.no').click(function(e) {
    var target = $(e.target);
    target.effect('highlight', {}, 'slow');
    var i = 0;
    var prev_element = target.prev();
    var element;
    while (i++ < 10) {
        element = $(prev_element[0]).context;
        if (element.className == "no") break;
        prev_element = prev_element.prev();
    }
    if (i > 9) {
        alert("Some problem with the finding number line");
    }
    else {
        var line_number;
        if (element.children.length > 0) line_number = element.children[0].innerHTML;
        else                             line_number = element.innerHTML;
        alert(line_number);
    }
    e.stopPropagation();
})

任何建议和改进将不胜感激。

相关文章：