本文实例讲述了jquery判断自定义属性data-val用法。分享给大家供大家参考,具体如下:
jquery判断自定义属性data-val
1.css
.active { color: red; }
2.html
<ul> <li data-val="1">1</li> <li data-val="2">2</li> <li data-val="3">3</li> <li data-val="4">4</li> <li data-val="5">5</li> </ul>
3.js
//方法1 $(function() { $("ul li[data-val='1']").addclass("active").siblings().removeclass("active") }); //方法2 $("ul li").each(function() { if($(this).attr("data-val") == "1") { $(this).addclass("active").siblings().removeclass("active"); } })
效果:
测试示例:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .active { color: red; } </style> </head> <body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <ul> <li data-val="1">1</li> <li data-val="2">2</li> <li data-val="3">3</li> <li data-val="4">4</li> <li data-val="5">5</li> </ul> <script> $(function() { $("ul li[data-val='1']").addclass("active").siblings().removeclass("active") }); </script> </body> </html>
感兴趣的朋友可以使用本站在线html/css/javascript代码运行工具:测试上述代码运行效果。
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery页面元素操作技巧汇总》、《jquery常见事件用法与技巧总结》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论