jQuery和js获取同一个class的所有的值

来源：互联网发布：淘宝转化率编辑：程序博客网时间：2024/05/24 07:08

-----------------笔记-----------------------

主要点：each方法

//i为下标//n为元素本身$('.lis').each(function(i,n){$(n).on('click',function(){console.log(i)})});

完整demo：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">li{cursor: pointer;-webkit-user-select: none;margin-bottom:10px;}</style></head><body><div class="list"><ul><li class="lis">1</li><li class="lis">2</li><li class="lis">3</li><li class="lis">4</li><li class="lis">5</li></ul></div></body><script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//i为下标//n为元素本身$('.lis').each(function(i,n){$(n).on('click',function(){console.log(i)})});</script></html>

-----------------------------分割线--------------------------------------

原生js方法：

var lis = document.getElementsByClassName('lis');//数组var lisLen = lis.length;for(var i = 0;i < lisLen;i++){//var存在变量提升, lis[i].index = i 为事先存储元素的索引值。若不写，打印的元素索引值会一直是元素的总长度。lis[i].index = i;//想省略这句，在for循环中，可用es6中的let替换varlis[i].onclick = function(){console.log(this.index);//元素索引值}}

阅读全文

0 0