使用addClass()设置自增类名

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用addClass()设置自增类名相关的知识，希望对你有一定的参考价值。

　　今天在翻阅JQuery API的时候发现，addClass()方法不仅可以添加类，同时可以调用回调函数。

　　代码如下：

　　　　

<body>
    <p>item1</p>
    <p>iem2</p>
    <p>item3</p>
</body>
    <script type="text/javascript">
            $(function(){
        $("p").addClass(function (index) {
            return "item"+index;            
        })
    })();

    </script>

　　在addClass()中的调用匿名函数，参数为当前元素的索引，然后返回类名。

　　效果如下：

　　技术分享

 

　　当然，这个回调函数可以设置两个参数，第一个为index，第二个为类名参数，主要用于控制语句。

　　代码如下：

　　　　

<style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body>
    <p>iem2</p>
    <p class="red">item1-red</p>
    <p>item3</p>
</body>
    <script type="text/javascript">
            $(function(){
        $("p").addClass(function (index,currentClass) {
            var addedClass;
            if(currentClass=="red"){
                addedClass="green";
                $(this).text("item-green");
                return addedClass;
            }            
        })
    })();

    </script>

　　效果如下：

技术分享

　　由此我们可以看到，addClass()的作用仅仅是添加类，而不是覆盖类。若想移除，可以使用removeClass()配合。

 

以上是关于使用addClass()设置自增类名的主要内容，如果未能解决你的问题，请参考以下文章

jQuery设置 CSS 类

.addClass(),.removeClass(),.toggleClass()的区别

jQuery的属性与样式之增加样式.addClass(),删除样式.removeClass()

JQuery属性操作 addclass removeclass hasclass toggleClass()

[ jquery 方法 addClass(class|fn) ] 此方法为每个匹配的元素添加指定的类名

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法(