我有以下代码突出显示数字,但似乎覆盖了其他数字。我该如何解决这个问题?
的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
答案 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);
});