显示并突出显示HTML中的特定行

Question

我试图实现一个应该预期具有以下属性的网页。

1. HTML页面包含许多文本行（数千行），基本上是一个日志文件。
2. 根据需要采取的行动，应该突出显示与行动相关的行。 （确切地说，如果你点击铬检查元素中的一个已记录变量的相应源按钮，就会发生这种情况。）

这似乎是非常基本的，但我无法弄清楚如何！可能是我错过了一些文学术语。 谢谢。

Answer 1

你需要做几件事情：

$("li").each(function(i, element) { 
    var li = $(element); 

    if (li.text() == "Orange") { 
    li.addClass("selected"); 

    // Get position of selected element relative to top of document 
    var position = li.offset().top; 

    // Get the height of the window 
    var windowHeight = $(window).height(); 

    // Scroll to and center the selected element in the viewport 
    $("body").scrollTop(position - (windowHeight/2)); 
    } 
}); 

见DEMO。

Answer 2

有很多方法可以解决这个问题。但是，在记录的源代码中是否有任何类标记，或者只是一个大的文本块？

如果在html上有类或id标记，你可以使用javascript或jquery来做到这一点。

document.getElementById('myText'); 

或jQuery的

var element = $("#myText"); 
//example css changes 
element.css("position","center"); 
element.css("color","red"); 

然后改变这些HTML元素的CSS样式。