通过循环将类添加到多个HTML元素

Andy4thehuynh

我正在创建具有360种颜色的色轮。我的标记要点如下所示:

HTML:

<table class="table1">
  <td class="medium-grey"></td>
  <td class="charcoal"></td>
  <td class="black"></td>
  ...

CSS:

.medium-grey { background-color: #76878e; }
.charcoal { background-color: #534259; }
.black { background-color: #060807; }

我通过CSS为每个添加背景色td我有很多颜色可以手动添加到每个表中,并且觉得很麻烦。我很好奇是否有一种方法可以遍历颜色组以td使用javascript或sass mixins追加到类中。

太秀
var css_classes =['medium-grey' , 'charcoal', 'black'];

var idx = 0
$( "table.table1 td" ).each(function( index ) {
    $(this).addClass(css_classes[idx]);
    if (idx < css_classes.length-1){
      idx+=1;
    }else{
      idx = 0;
    }
});

给定css类,迭代td,然后按顺序分配css类。

参考:jsfiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将类添加到循环中的元素(jquery)

来自分类Dev

将类添加到AngularJs中的多个元素

来自分类Dev

如何使用JS将多个类添加到元素?

来自分类Dev

如何使用Deface将类添加到html元素?

来自分类Dev

OM如何将类添加到html元素

来自分类Dev

使用jQuery将类添加到html元素

来自分类Dev

根据条件通过python将类添加到html

来自分类Dev

将for循环元素添加到列表

来自分类Dev

将类添加到父元素

来自分类Dev

将类添加到erb元素

来自分类Dev

将类添加到后续元素

来自分类Dev

无法将类添加到元素

来自分类Dev

将类添加到槽元素 (?)

来自分类Dev

将 HTML 添加到 PHP 循环

来自分类Dev

通过单击将类添加到元素,然后将其删除到其他元素

来自分类Dev

将事件添加到html元素

来自分类Dev

将类“ last”添加到while循环中数组的最后一个元素

来自分类Dev

如何将动态类添加到 angular 中的循环元素

来自分类Dev

通过jQuery将类添加到Drupal字段会输出错误的循环

来自分类Dev

通过sql循环动态将多个TextView添加到TableRow

来自分类Dev

使用反射通过循环将多个服务添加到IServiceCollection

来自分类Dev

通过useState react将类添加到.map函数中的元素

来自分类Dev

jQuery-一次将类添加到多个元素?

来自分类Dev

有条件地将多个类添加到元素

来自分类Dev

如何将 mouseenter() 或 mouseleave() 添加到同一类的多个元素?

来自分类Dev

将类添加到具有相同类的多个元素

来自分类Dev

简单的jQuery通过<li>元素循环并添加到<datalist>

来自分类Dev

将类添加到所选元素之外的元素

来自分类Dev

将类添加到动态添加的元素