当前位置：文江博客话题详情

通过JavaScript获取html中的行号

发布于 2024-11-09 05:23:09 字数 76 浏览 10 评论 0原文

我已经通过 CodeRay 突出显示了 ruby 代码，现在我想知道用户单击了哪个行号。该行号应与源代码中的行号相对应。哪种方法最好？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悍妇囚夫 2024-11-16 05:23:09

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

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

Here's how I resolved this question.
I generated html with the numbers by CodeRay. But CodeRay doesn't have accurate documantation on official site, so after looking throught the CodeRay's code I've made it like this:

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

The mode :line_numbers => :table doesn't work properly in my case that's I should've use :inline mode. If you don't like numbers in your html page i think you can remove it by css or javascript.
Then I wrote small javascript function:

$('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();
})

Any suggestions and improvements will be appreciated.

回复收藏 0 原文

~没有更多了~