Question

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

的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

Answer 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);
});

JS突出显示覆盖文本问题

1 个答案: