精华内容
下载资源
问答
  • 原生js获取当前li元素的索引及demo

    万次阅读 2016-11-11 14:59:20
    function li(){ var li=document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].index=i; li[i].onclick=function(){ alert(this.index); for(var j=0;j<li.length;j++){

    样式:

    <style>
    *{ margin:0; padding:0; list-style:none; text-decoration:none; color:#000;}
    li.on{ background-color:#f00;}
    li.on a{ color:#fff;}
    </style>

    html:

    <div style="width:200px; height:300px; border:1px solid red; margin:50px auto; text-align:center;">
        <ul>
            <li style="line-height:32px;"><a href="javascript:void(0);">1111111</a></li>
            <li style="line-height:32px;"><a href="javascript:void(0);">2222222</a></li>
            <li style="line-height:32px;"><a href="javascript:void(0);">3333333</a></li>
            <li style="line-height:32px;"><a href="javascript:void(0);">4444444</a></li>
            <li style="line-height:32px;"><a href="javascript:void(0);">5555555</a></li>
            
        </ul>
    </div>

    js:

    <script>

    function li(){
            var li=document.getElementsByTagName('li');
            for(var i=0;i<li.length;i++){
                li[i].index=i;
                li[i].οnclick=function(){
                    alert(this.index);
                    for(var j=0;j<li.length;j++){
                        li[j].className='';
                        }
                    this.className='on';
                    };
                }
            }
        li();

    </script>

    展开全文
  • js获取li的索引

    千次阅读 2015-11-02 10:22:15
    js获取当前选中的li的索引以及中文本值  *{margin: 0;padding: 0;}  ul li {list-style-type: none;}  .ulall {width: 300px;margin: 0 auto;}  .ulall li{width: 300px;height: 35px}
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>js获取当前选中的li的索引以及中文本值</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        *{margin: 0;padding: 0;}
        ul li {list-style-type: none;}
        .ulall {width: 300px;margin: 0 auto;}
        .ulall li{width: 300px;height: 35px}
    
    </style>
    </head>
    <body>
        <ul id="ulall">
            <li name="chek">java</li>
            <li name="chek">css</li>
            <li name="chek">javascript</li>
            <li name="chek">jquery</li>
            <li name="chek">html5</li>
        </ul>
    <pre name="code" class="html"><pre name="code" class="html"><h1>使用闭包实现</h1>
    
    <div class="all" id="conAll">
            <ul>
                <li>html</li>
                <li>css</li>
                <li>javascript</li>
                <li>jquery</li>
            </ul>
        </div>
    
       


     <script> var ultarget=document.getElementById("ulall"); var lis=ultarget.getElementsByTagName("li"); for(var i=0,length=lis.length;i<length;i++){ lis[i].οnclick=function(){ var liIndex=index(this,lis); alert("当前li的索引值是:"+liIndex); } } function index(current, obj){for (var i = 0,length=obj.length; i < length; i++) {if (obj[i] == current) {return i;}}}
    /*使用闭包实现*/
    <pre name="code" class="html"> function requireIndex(){
        	 var targetCon=document.getElementById("conAll");
    	var items=targetCon.getElementsByTagName("li");
    	for(var i=0,length=items.length;i<length;i++){
    		var that=items[i];
    		that.οnclick=(function(k){
    			var info=that.innerHTML;
    			return function(){
    				alert(k+"---"+info);
    			}
    		})(i);
    	}
        }
        requireIndex();
    
    
     </script></body></html>
    
    

    展开全文
  • 如何用JS获取当前标签的索引

    千次阅读 2018-11-28 16:04:51
    有时候,我们需要点击标签的时候,知道当前的索引值。这样好利用索引值去获取另一个标签,进行样式更改。 最典型的运用就是图片轮播。比如这种: 点击对应点,就要显示对应的图片和文字内容。 如何把点 跟 图片...

    有时候,我们需要点击标签的时候,知道当前的索引值。这样好利用索引值去获取另一个标签,进行样式更改。

    最典型的运用就是图片轮播。比如这种:

    点击对应点,就要显示对应的图片和文字内容。 如何把点 跟 图片及文字 对应起来呢? 靠的就是索引。

    有如下结构:

    <ul id="myul">
        <li>你好1</li>
        <li>你好2</li>
        <li>你好3</li>
        <li>你好4</li>
        <li>你好5</li>
    </ul>

    我想点击任意 li,就输出它的索引值。

    方法有几个:

    方法一:最简单的就是 jQuery方式了。

    $("#myul>li").on("click",function(){
        var  $this = $(this);   //  习惯性保存下当前标签
        var index = $this.index();
        console.info( index );
    });

    方法二:原生态JS。写标签的时候,给 li 添加自定义属性 index 。点击 li 的是时候,就获取 当前标签 的 自定义属性 index。

    改造 HTML 结构如下:(索引不出意外的话,都是 0 开始的。)

    <ul id="myul">
        <li index="0">你好1</li>
        <li index="1">你好2</li>
        <li index="2">你好3</li>
        <li index="3">你好4</li>
        <li index="4">你好5</li>
    </ul>
      var myul = document.getElementById("myul");
        var  li = myul.children;
        for( var i = 0 ; i<= li.length-1 ; i++){
            li[i].onclick = function(){
                var _this = this;
                var  index = _this.getAttribute("index");
                console.info( index);
            }
        }

    方法三:原生态JS。方法二尽管可以完成要求,但是如果标签数量经常变动,也不是个好事情,还要改自定义属性。所以,还是用原来的结构:

    <ul id="myul">
        <li>你好1</li>
        <li>你好2</li>
        <li>你好3</li>
        <li>你好4</li>
        <li>你好5</li>
    </ul>
     var myul = document.getElementById("myul");
        var  li = myul.children;  
        for( var i = 0 ; i<= li.length-1 ; i++){
            li[i].index = i ;  // 添加属性
            li[i].onclick = function(){
                var _this = this;  
                console.info( _this.index);  // 输出自定义属性
            }
        }

       li[i].index = i ;    这句代码,其实还是在给 li 标签添加 属性 index。 标签属性也可以这样加? 当然~!因为标签本质就是一个对象,是一个对象,当然可以添加属性了。不过这属性是JS 赋予它的,没有直接写在标签上,所以不能使用 getAttribute() 获取它的值。

    方法四:原生态JS,利用闭包。

     var myul = document.getElementById("myul");
     var  li = myul.children;
    
    for( var i = 0 ; i<= li.length-1 ; i++){
            li[i].onclick=(function(n){
                     console.info(n);   // 这个代码会直接执行哦。它在闭包里。
                    return function(){
                        console.info( n );
                    }
            })(i);
     }
    

    原理:li 创建事件函数的时候,其实执行了一个闭包。这个闭包把 对应的 i 作为参数传进来,并赋值给 闭包的内部函数。内部函数会保持这个 i 值不变。这样,点击任意一个 i ,就会得到对应的索引 i。

    方法五:原生态JS,还是利用闭包。

    var myul = document.getElementById("myul");
    var  li = myul.children;
    for( var i = 0 ; i<= li.length-1 ; i++){
            (function(n){
                li[n].onclick=function(){
                    console.info(n);
                }
            })(i);
        }

    每次执行循环,执行闭包,闭包可以保留当前 i 的值到 内部中。

    方法四,与方法五,都是避免了直接在for循环里输出 i 的值(怎么输出都是 4),而是借用了闭包保留当前 i  的值。

    方法六:还是ES6爽快,用 let 定义 循环变量 i 就ok了。鉴于此,大家还是及早掌握 ES6 吧。

    let  myul = document.getElementById("myul");
    let  li = myul.children;
    for( let i = 0 ; i<= li.length-1 ; i++){
            li[i].onclick = function(){
                console.info( i );
             }
    }

    原因,let 定义 i, 会把每次循环都成一个封闭空间。 i 值 就不会传递到空间外了(虽然它也可以自增)。具体可以了解下ES6 对for 的解释。

    展开全文
  • 以ul下的li元素为例;获取li的索引,代码如下: <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</l...

    以ul下的li元素为例;获取li的索引,代码如下:

     <ul id="list">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
     </ul>

    方法1:

    把每个li元素加上index属性,每个li被点击时获取index属性即可

    var ul =  document.getElementById("list");
    var list = ul.querySelectorAll('li');
    for (var i = 0; i < list.length; i++) {
            list[i].index = i;
    }
    ul.addEventListener('click',function(e){
            console.log(e.target.index);
    })

    方法2:

    获取ul下的所有li,找到被点击li在所有li中的位置

    ul.addEventListener('click',function(e){
            var item = e.target;
            var lists = Array.from(ul.querySelectorAll('li'));
            console.log(lists.indexOf(item));
    })

     

    转载于:https://www.cnblogs.com/renbo/p/9533830.html

    展开全文
  • JavaScript代码 $(“li”).hover(function(){ ...它的说明为: 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
  • 下面的代码有点问题,用的是事件委托, JS方法如果获取当前LI的索引值 ? index不起用 。为何 ?请指教 <!doctype html> <html> <head> <meta ...
  • v-for 还支持可选的第二个参数,作为当前的索引。 也可以使用 v-for 来遍历对象的属性。 还可以提供第二个参数,作为对象的键名(key): <body> <li click=onclick(index) v-for=(item,index)>{{item...
  • 官方例子中js部分挺坑,需要给每一个选项绑定事件,代码量太大,最后会给出参考代码。下面是改进一个示例 HTML部分: <div class="public-left"> <div class="public-choose"> <div class=...
  • 获取li的集合,进行遍历,为每个li绑定点击事件,打印当前li的索引 在循环内,创建立即执行函数,立即执行函数内部是包裹着点击事件的,自执行函数的参数是for循环变量 代码块: <body> <ul class="nav...
  • 都是干货哦。 1.以ModelAdnView传数据到jsp页面,如何使用数据。 2. 页面导航后退功能 3. js操作style样式方式,比如...6. html里获取当前索引值 7. 弹出框,引入bunndle.js 8. 我想取索引值小于3所以li 9. 请求报
  • JS-网页中分页栏

    2017-06-24 13:40:00
    原理 三部分 我给分页栏分成了3部分 上一页:调用prePage()函数 下一页:调用nextPage()函数 带有数字标识的部,调用skipPage()函数 prePage函数 function prePage() { ... // 获取当前li的索引值 ...
  • eq() 函数获取当前对象中指定索引所对应的的元素语法$selector.eq(index)//index为指定索引,值为数字型返回值返回值为一个对象实例说明代码onetwothreedocument.writeln( $("li").eq(1).attr("class"));//class="li...
  • 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表ul、定义放定时器变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直无限制...
  • 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表ul、定义放定时器变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直...
  • //获取当前鼠标移入的li标签索引(即为第几个li标签) console.log(index1); // 让中间索引对应的li显示,其他的li隐藏 $('#ulcenter li').eq(index1).show().siblings('li').hide(); }); ...
  • JS 实现动态轮播图

    2020-07-15 19:33:47
    页面加载、获取整个容器、所有放数字索引的li及放图片列表ul、定义放定时器变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直无限制递增...
  • //当前索引 this._timer = null;//定时器 this._slider = oSlider;//滑动对象 this._parameter = parameter;//切换参数 this._count = count || 0;//切换数量 this._target = 0;//目标参数 this....
  • 你可以使用 v-repeat 指令来基于 ...此外,你还可以通过 $index 属性来获取当前实例对应数组索引。 <li v-repeat=items class=item-{{$index}}> {{$index}} - {{parentMsg}} {{childMsg}} </li> </ul>
  • 供大家参考,具体内容如下首先给大家看一看js图片轮播效果,如下图具体思路:一、页面加载、获取整个容器、所有放数字索引的li及放图片列表ul、定义放定时器变量、存放当前索引的变量index二、添加定时器,...
  • 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表ul、定义放定时器变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直...
  • 思路:首先要解决第一个默认为红色,通过定义一个变量来与当前的index作比较,如果相同就变成个红色,接下来我们获取每次点击的列表的索引值并且然后赋值给我们定义的变量就可以了。 <div id="app"> <ul...
  • 数组就是数值索引的任何类型值集合。 数组不需要你提前定义长度。<code>delete会删除对应位置值,但即使你<code>delete了所有值,数组长度不会变化。这样数组是稀疏数组("sparse"...
  • // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 cols: arrayColumn }); } else { //未全选中,清除表格 document.getElementById('createTable').innerHTML = ""; } }, ...
  • 1.先写静态,图片显示一个其余隐藏,小圆点对应数目,这两个都是ul li标签,用于后来在js中方便获取index索引值 2.写css 3.js:封装一个换图片函数changePic(),选取index图片显示和小圆点变蓝,其余兄弟元素...
  • 然后根据他们模4的索引值appendchild进行插入,虽然无法实现瀑布流,但是也是一个不错的思路。 上面分析得知,我们哪样子是不行的,所以分析可知瀑布流的实现的话应该是我们每次插入itemDom的时候进行计算,分析得出...
  • //获取指定标签页索引 }else{ $("#tabs").tabs('add',{ title:self.text(), fit:true, closable:true,//在tab上加一个关闭按钮 href:...
  • //定义变量获取当前li的索引值; q=$(this).index(); //alert(q) //通过当前索引匹配对应图片并进行显示,其余同级图片进行隐藏; $(".box a").eq(q).show().siblings(".box a").hide() }) //轮播图 ...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
热门标签
关键字:

js获取当前li的索引