在js中怎么样选择互斥的相邻元素
在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下:
<style>
*{padding:0px;margin:0px;}
ul li{list-style:none;}
.box ul li{padding:10px 0px;}
.active{background:red;}
</style>
div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
$(".box").find("li").on("click",function(){
<script type='text/javascript' src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(".box").find("li").on("click",function(){
var $index = $(this).index();//获取点击当前的索引
$(this).addClass("active").siblings("li").removeClass("active");//为当前点击元素添加class,移除相邻兄弟元素li的active
console.log($index);
});
var $li = $(".box li").eq(0);//获取第一li
console.log($li); </script>
从上以上jquery代码可以很简单的实现了相邻元素的匹配筛选以及获取当前点击的索引值,然而在js中获取索引以及筛选相邻元素是这样的:
(function(){
var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var ulDom = boxDom.getElementsByTagName("ul")[0];
var liDom = ulDom.getElementsByTagName("li");
for(var i=0;i<liDom.length;i++){
liDom.index = i;//当前的索引值,添加一个自定义索引,自定义属性值,index是每一个li上自定义的索引值 liDom[i].onclick = function(){
//for循环,先清除所有的样式,再添加当前需要的样式
for(var j=0;j<liDom.length;j++){
liDom[j].className = "";//所有的li清除样式,0 1 2
};
this.className = "active"//为当前点击的class添加样式 console.log(this.index);//对应每一个点击li获取当前的index索引,0,1,2
}
}
})()
在筛选相邻元素上还有一种思路是这样的:
var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var ulDom = boxDom.getElementsByTagName("ul")[0];
var liDom = ulDom.getElementsByTagName("li");
//初始化值
var oli = null,num=0;//oli是上一次的值,num是初始值
oli = liDom[num];
for(var i=0;i<liDom.length;i++){
liDom.index = i;//当前的索引值,添加一个自定义索引 liDom[i].onclick = function(){ oli.className = "";//将所有oli的class值清除
oli = this;//记录上一次的class
this.className = "active";//添加当前点击的class
}
}
通过以上代码我们可知,jquey中api方法无论是筛选元素还是选择相邻元素,都会比js要简单得多,但原生js一些思想以及这里涉及的一些自定义属性的使用还是很基础的,以上简单的两个场景在使用jquery中非常简单,但原生js原理的思想还是要根深蒂固,基础性的东西还是很重要的
在js中怎么样选择互斥的相邻元素的更多相关文章
- js中的选择排序和冒泡排序
var arr = [12,25,8,16,14]; console.log("排序前数组,",arr) //选择排序:第一轮,找出数组中最小的数,将第一项和最小的数互换位置.第二 ...
- JS中的数组,添加删除元素,判断是否存在一个值的方法总结
一.添加元素: 1:在最后添加,返回数组长度:arr.push(...); 2:在最前面添加,返回数组长度:arr.unshift(...); 3:在指定位置添加,没有返回值:arr[i] = xxx ...
- js中的children实时获取子元素
先看下面一个小例子的结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- JS中字符串拼装 单双引号的处理 字符转义
js中可能会用到动态追加元素,可能数据也是从后台传过来的,当然有两种思路, 1.在后台拼装好直接返回; 2.在前台js里面拼装, 如果拼装大量的html时可能单双引号就容易出问题;那么如何解决呢?最近 ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比(转载)
在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...
- javascript中快速求数组的全部元素的相加之和
js中快速求数组的全部元素的相加之和: var arr = [1,2,3,4,5];var sum = eval(arr.join('+')); console.log(sum); 运行结果: 15
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
随机推荐
- Hibernate3 和Hibernate4 在配置文件上的区别
在使用hibernate之前要首先对hibernate进行一些基础的配置信息,像映射文件XXX.hbm.xml XXX代表当前的domain的模型类名 <?xml version=" ...
- MYSQL file types redo log
https://blogs.oracle.com/mysqlinnodb/entry/data_organization_in_innodb https://blogs.oracle.com/mysq ...
- Web前端MVC框架
MVC: 模型层(model).视图层(view).控制层(controller) Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据. View: ...
- jquery筛选器
1.过滤 eq(index|-index) 获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始. first 获取当前链式操作中第1个jquery对象 last 获取当前链式 ...
- mybatis 与 日志
如上图所示,mybatis默认支持7种日志记录的方式,也可以自己实现Log接口,然后将实现类通过LogFactory注入到日志工厂中. LogFactory是日志模块的入口,外层通过getLog获取L ...
- 如何解决Oracle RAC 安装集群软件或数据库时无法自动识别节点
在节点一 grid用户下: $ORACLE_HOME=/u01/app/11.2.0/grid/ [grid@orarac1 /]$ cd /u01/app/11.2.0/grid/oui/bin [ ...
- # C/C++的笔试题目
p,li { white-space: pre-wrap } # C/C++的笔试题目 + include<> 和include"" 的区别 + sizeof操作符与字 ...
- ERROR 2049 (HY000): Connection using old (pre-4.1.1) authentication protocol refused (client option 'secure_auth' enabled)
mysql安全机制的问题 解决: mysql -P 3306 -h host -u account --secure_auth=off -pmysql -P 端口号 -h 主机地址 -u 账号 --s ...
- day21、模块
模块: 模块,用一砣代码实现了某个功能的代码集合.不同功能,放置在不同模块中,模块就是一个.py文件.避免函数重复写代码.对于相同功能的代码.只需要调用该模块或者该模块里面的函数就可以.增加灵活性,和 ...
- MySQL服务 - MySQL列类型、SQL模式、数据字典
MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...