Question

我有一个像这样的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;
}

如果还有其他更好的解决方案，请建议我，谢谢

Answer 1

＆＃13;

nloptr

＆＃13;

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

＆＃13;

javascript如何逐字阅读和高亮显示

1 个答案: