我有一个像这样的html
<ul>
<li>This is text</li>
</ul>
<p> bbbb ccc</p>
<p> <b> bbbb ccc</b></p>
我有所有单词索引,所以我想根据索引高亮每个文本,所以我是否可以将其转换为这种形式(将 id 分配给第一个父级):
<ul>
<li id="0">This is text</li>
</ul>
<p id="12"> bbbb ccc<p/>
<p> <b id="22"> bbbb ccc</b><p/>
id代表单词的第一个索引。
我正在尝试以下解决方案,该解决方案仅适用于仅文本包含在 p 标签中的情况,并且它在那里工作正常。 但问题是当我们的 html 中有其他标签时。
$(document).ready(function() {
var allP = $("#inputText").find("p");
var indexCount = 0;
$.each(allP, function(key, value) {
var paraText = $(value).text().trim();
var textCount = paraText.length;
if (textCount > 0) {
$("#inputText p").eq(key).addClass('' + indexCount);
indexArray.push(indexCount);
}
indexCount += textCount;
});
});
function changeColor(index, word) {
var alreadyTxt = $('.highlightClass').text();
$('.highlightClass').replaceWith(alreadyTxt);
var paraVal = getIndexVal(index);
if (paraVal != -1) {
var txt = $('.' + paraVal).text();
var filteredText = txt.substr(0, index - paraVal) + '<span class="highlightClass">' + word + '</span>' + txt.substr(index - paraVal + word.length);
$('.' + paraVal).html(filteredText)
}
}
function getIndexVal(ind) {
var retunValue = -1;
var lastIndex = 0;
$.each(indexArray, function(key, value) {
if (ind <= value) {
retunValue = lastIndex;
return false;
}
lastIndex = value;
});
return retunValue;
}
如果还有其他更好的解决方案请推荐我,谢谢
最佳答案
$(document).ready(function(){
var id_array =[];
$('[id]').each(function() {
id_array.push(parseInt($(this).attr("id")));
console.log(parseInt($(this).attr("id")));
});
// Sort ID
id_array.sort(function(a, b){return a-b});
// highlight each ID by serialy
for (i = 0; i < id_array.length; i++) {
// highlight or change background of each id
$("#"+id_array[i]).css("background-color", "yellow");
// You can define delay option here to sea effect
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li id="0">This is text</li>
</ul>
<p id="12"> bbbb ccc<p/>
<p> <b id="22"> bbbb ccc</b><p/>
<p> <b id="2"> 22222</b><p/>
关于javascript 如何逐字阅读并突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36306356/