改变跨度部分的css

时间:2013-08-14 12:47:32

标签: jquery css

我正在寻找一个解决方案来突出显示表中的最佳模型(而不是html表)。问题是每个模型都包含几个修剪。因此,对于价格,我会显示该型号从低价到高价的范围,例如$ 50.000 - $ 60000.

我可以使用下面的脚本突出显示包含该信息的整个span标记,但我想强调更低的价格,即$ 50.000。,而不会弄乱我的整个设置。

为了澄清,在下面变量“best”中的第一个值(92.9)的情况下,包含该值的范围标记(li中顶部的第3个)也包含113.9。我希望只有92.9突出显示。 113.9应保持原样。

我知道我必须以某种方式为我想要突出显示的那些案例添加一个标签,但我对如何正确分离最佳值感到不满。

请在此处查看小提琴:http://jsfiddle.net/SnYWL/

<script>
$(document).ready(function(){
    var best = ['92.9','74.9','17','197','4.1','106','774'];//simplified
    var order = [5, 8, 12, 14, 15, 16, 19];
for(var i=0; i<7 ;i++){

$("#modinfo li span:nth-child(" + order[i] + ")").each(function(){
  var best_val=$(this).text();
if(best_val.indexOf(best[i]) > -1){
    $(this).css('color','#33cc00');
}
});
}
});
</script>

该表由一系列li元素组成,如下例所示:

    <ul id="modinfo">

<li>
    <span class="z1">i10</span>
    <span class="z2">3</span>
    <span class="z1">92.9-113.9</span>
            <span class="z5">5.2-5.7</span>
            <span class="z6">86.4-101.5</span>
    <span class="z1">ilim</span>
    <span class="z2">6</span>
    <span class="z1">69</span>      
            <span class="z2">4.7 a 5.8</span>
            <span class="z1">111</span>
    <span class="z1">5</span>
    <span class="z2">225</span>
            </li>

........

1 个答案:

答案 0 :(得分:3)

如何用样式化的span替换目标值?

$(this).html(best_val.replace(best[i], "<span style='color:#33cc00'>" + best[i] + "</span>"));

Fiddle