通过JavaScript获取html中的行号

时间:2011-05-22 21:18:51

标签: javascript coderay

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

1 个答案:

答案 0 :(得分:0)

以下是我如何解决这个问题的方法。 我用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();
})

任何建议和改进都将受到赞赏。