jQuery判断自定义属性data-val用法示例


Posted in jQuery onJanuary 07, 2019

本文实例讲述了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");
  }
})

效果:

jQuery判断自定义属性data-val用法示例

测试示例:

<!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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery replace方法去空格
May 08 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
You might like
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python打印输出数组中全部元素
2018/03/13 Python
python实现内存监控系统
2021/03/07 Python
python http基本验证方法
2018/12/26 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
J2EE面试题大全
2016/08/06 面试题
装修施工安全责任书
2014/07/24 职场文书
创先争优活动承诺书
2014/08/30 职场文书
查摆剖析材料范文
2014/09/30 职场文书
勤俭节约主题班会
2015/08/13 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
python blinker 信号库
2022/05/04 Python