本文實例講述了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代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
