javascript - 为 中用逗号分隔的文本应用不同的 css

Question

我正在尝试更改以逗号 (',') 分隔的文本的颜色。我不能使用任何其他标签来分隔这些。这可能通过 jQuery 还是通过 css？

<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">ABCD,XYZ</div>
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">cdE,hhhh</div>

Answer 1

创建了一个 fiddle为你

var colorArr = ['red', 'green'];
$( "[data-value='ABCD,XYZ']" ).each ( function(){

  var valueArr = $( this ).html().split( "," );
  console.log( valueArr );
  for (var counter = 0; counter < valueArr.length; counter++ )
  {
     valueArr[ counter ] = "<span style='color:" + colorArr[ counter ] + "'>" + valueArr[ counter ] + "</span>";
  }
  console.log( valueArr );
  $( this ).html( valueArr.join("") );

} );