Question

我有注释文本，我希望某些带注释的单词与其注释一起进行颜色编码，但我不想手动执行。有没有办法让javascript（或jquery）甚至css使第一个class="Noted"绿色，然后第二个蓝色，然后在第五个回到绿色，并对相应的{{1 }} S'

Answer 1

你可以这样做：nth-child你需要像jQuery这样的东西来支持IE，虽然......正在努力......

这是仅限CSS版本的第一小提琴http:http://jsfiddle.net/zhQ67/2/ **使用以下新代码更新FIDDLE **

CSS：

.noted:nth-child(4n+1) {
  background: green;
}

.noted:nth-child(4n+2) {
  background: red;
}


.noted:nth-child(4n+3) {
  background: yellow;
}


.noted:nth-child(4n+4) {
  background: blue;
}

最终更新使用thirtdots更新代码并包含一些jQuery for IE - JSBIN Page

Answer 2

你可以使用getElementsByClass获取所有元素，然后简单地遍历它们，给每一个元素和它对应的元素class =“note”一个不同的颜色。

Answer 3

在jquery中......根据需要设置颜色。 jsFiddle demo

<script type="text/javascript">
    $(".Noted").each(function(i,e){
    switch(i%4){
        case 0: $(this).css({color:"#f00"});break;
        case 1: $(this).css({color:"#0f0"});break;
        case 2: $(this).css({color:"#00f"});break;
        case 3: $(this).css({color:"#ff9"});break;
        case 4: $(this).css({color:"#f90"});break;       
    }
});

</script>

Answer 4

首先，尝试将元素封装在容器中。这将使孩子们的选择更容易。

<div id="parent">
     <span class="note">Green</span>, <span class="note">blue</span> 
     then <span class="note">red</span>.
</div>

然后，js：

<script>
var  children = document.getElementById('parent').getElementsByTagName('*')
    ,colours = ['green','blue','red','orange']
    ,i,j=0,max;

for (i = 0, max = children.length; i<max; i++) {
    if(children[i].getAttribute('class') == 'note') {
       children[i].setAttribute('style','color:' + colours[j]);
       j++;
       if (j>colours.length) {
          j = 0;
       }
    }
}
</script>

Answer 5

如果HTML是由服务器端脚本生成的，您可以让脚本根据生成的注释分配一个类，然后在样式表中为该类指定一种颜色，如下所示：

.note1 { //Corresponds to class='note1'
  color: green; //or whatever you want
}
.note2 { //Corresponds to class='note2'
  color: blue; //or whatever you want
}
/* and so on */

如果只是静态编写HTML，则根据您想要的颜色分配与样式表中定义的对应的类。

如果他们是孩子，你可以使用clairesuzy的解决方案。

另一个选项是将所有这些分配为类note，然后使用javascript根据您设置的预定义顺序对标记为类note的所有内容进行着色。

这可能就像这样（使用jQuery）：

在这里演示：http://jsfiddle.net/hs8Nm/

<p class="note">Note 1</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
<p class="note">Note 4</p>

和相应的Javascript：

$(document).ready(function(){
  var colors = ['green','blue','orange','yellow',"FFFFF0"]; //Assign your color order here.
  $('.note').each(function(index){
      this.css('color',colors[index%5]);  
  });
});

Answer 6

好的，根据你的jsFiddle你可以使用这些行中的内容来获得你想要的结果：

p:nth-child(5n+1) .Noted, p:nth-child(5n+1) .Annotation {color: green}

在this modification of your jsfiddle

中展示

Answer 7

是的，可以使用CSS Selectors完成。您可以在匹配出现的列表中获取第一个，第二个，第三个等元素。

Answer 8

你走了：

<html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <title>Cycle classes</title>

<style>
.blue {

    background-color: blue;
}

.green {

    background-color: green;
}

.yellow {

    background-color: yellow;
}
</style>

<script>


$(document).ready( function() {
$(".Noted").each(function(i) {
    var classes = ['green','blue','yellow'];
    $(this).addClass(classes[i % classes.length])
});

})

 </script>



</head>

<body>

 <div class="Noted">hello</div>
 <div class="Noted">world</div>
 <div class="Noted">it works</div>
 </body>
</html>

如何为连续的CSS类提供不同的颜色（Javascript）？

8 个答案: