我创建了一个突出显示功能,该功能将使用用户指定的关键字突出显示<p>
红色中包含的任何内容。单击提交按钮时,Javascript / jQuery从输入字段中提取关键字并将其与任何具有该关键字的行进行比较,然后将这些行突出显示为红色。它效果很好......但速度很慢。还有另一种方法可以在使用超过1000行<p>
时更快地完成此操作吗?
HTML
Keyword: <input type="text" id="highlight_box" class="text_box" value="--Text--" />
<input type="button" id="highlight" value="Highlight" />
<!--Print area for the Access log-->
<div id="access_content" class="tabbed-content">
<ul id="access-keywords-row" class="keywords-row">
<!--When a user submits a keyword it is placed as a tag here so it can be deleted later-->
</ul><br /><br />
<div id="access_log_print" class="print-area">
<p>Some Content</p>
<p>Some more content</p>
<!--Most of the time this could contain 1000's of lines-->
</div>
</div>
的JavaScript
//add highlight and tag
$("#highlight").click(
function(){
var id = $("#highlight_box").val();
if(id == "--Text--" || id == ""){
alert("Please enter text before highlighting.");
}else{
$("#access-keywords-row").append("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + " </li>");
$("#access_log_print p:containsi(" + id + ")").css("color","red"); }
});
//remove highlight and tag
$(".keywords-row").on("click", ".delete_filter",
function() {
var val = $(this).val();
//remove element from HTML
$(this).parent().remove();
$("#access_log_print p:containsi(" + val + ")").css("color","black");
});
答案 0 :(得分:3)
添加颜色,红色意味着将样式属性添加到每个p,我认为可以改进添加类:
p.highlight {
color:red;
}
并替换
$("#access_log_print p:contains(" + id + ")").css("color","red");
通过
$("#access_log_print p:contains(" + id + ")").addClass('highlight');
这可能加快了一点过程
答案 1 :(得分:0)
尝试定义一个css类,例如:
.red{background-color:#f00;}
然后您只需"style=background-color:#f00;"
.addClass("red");
只需更少的代码,但jQuery必须通过所有行,如果它很多,那么我想这取决于你的机器速度;)
答案 2 :(得分:0)
我使用jQuery的contains()
方法编写了一个小解决方案。显然你可以投入一些字符串验证。
答案 3 :(得分:0)
以下解决方案可能会以空间为代价提高性能。它的工作原理是构建行的单词映射并直接访问以添加或删除高亮类。此解决方案还会计算过滤器命中该行的次数,以便在删除最后一个过滤器之前保持突出显示。我已经测试了几行,我不知道它将如何与1000s一起表现。你告诉我们:))
$(function(){
buildIndex();
$("#highlight").click(
function(){
var id = $("#highlight_box").val();
if(id == "--Text--" || id == ""){
alert("Please enter text before highlighting.");
}else{
var filter = $("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + " </li>");
filter.click(function(){
$(this).remove();
removeHighlight(id)
});
$("#access-keywords-row").append(filter);
$.each(index[id], function(i,line){
if (line.highlightCount)
line.highlightCount++;
else {
line.addClass('highlight')
line.highlightCount=1;
}
});
}
});
function removeHighlight(id) {
$.each(index[id], function(i,line){
line.highlightCount--;
if (line.highlightCount<1)
line.removeClass('highlight')
});
};
});
var index={};
function buildIndex(){
$("#access_log_print p").each(function(i) {
var line = $(this)
var words = line.text().split(/\W+/);
$.each(words, function(i,word){
if (!index[word]) { index[word]=[]; }
index[word].push(line);
});
});
}