JS突出显示覆盖文本问题

时间:2014-08-10 23:41:47

标签: jquery

我有以下代码突出显示数字,但似乎覆盖了其他数字。我该如何解决这个问题?

的JavaScript

var numbers, spans;
numbers = $(".range").html().replace(/\s/g, '').split("");
spans = "<span>" + numbers.join("</span>\n<span>") + "</span>";
$(".range").html(spans);

CSS

p.range span:nth-child(n+2):nth-child(-n+4) {
 color:red;
}

HTML

<p class="range">123345232</p>

<p class="range">34242425232</p>

当我运行此命令时,我收到以下错误输出:

1 2 3 3 4 5 2 3 2

1 2 3 3 4 5 2 3 2

1 个答案:

答案 0 :(得分:1)

你拥有jQuery的方式是保存第一个范围并将其输出到其他p.range元素。在我的jsFiddle中,您可以看到如何使用.each

完成此操作

下面是更新的jQuery。通过包装.each并使用$(this),它确保我们只改变我们当前正在处理的范围。

var numbers, spans;

$('.range').each(function() {
    numbers = $(this).html().replace(/\s/g, '').split("");
    spans = "<span>" + numbers.join("</span>\n<span>") + "</span>";
    $(this).html(spans);
});