精华内容
下载资源
问答
  • 原生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>

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="list">...li>.../li>...li>...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul id="list">
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    		<script type="text/javascript">
    			var oList = document.getElementById("list");
    			var aLi = oList.children;
    			/*for(var i = 0; i < aLi.length; i++){
    				aLi[i].index = i;
    				aLi[i].onclick = function(){
    					console.log(this.index);
    				}
    			}*/
    			/*for(var i=0;i<aLi.length;i++){
    				aLi[i].onclick = (function(i){
    					return function(){
    						console.log(i)
    					}
    				})(i);
    			}*/
    			
    			/*for(var i=0;i<aLi.length;i++){
    				(function(i){
    					aLi[i].onclick = function(){
    						console.log(i);
    					}
    				})(i);
    			}*/
    			for(let i = 0; i < aLi.length; i++){
    				//4个i 每个i的值不同,点击哪个li,找对应的i
    				aLi[i].onclick = function(){
    					console.log(i);
    				}
    			}
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • 获取点击li当前索引 点击特定次序的li 展现特定的页面 $('.wgsb').find('.wangge_data_list li').click(function(){var index=$('.wgsb').find('.wangge_data_list li').index($(this));//alert(1);$('.wangge...

    获取点击li的当前索引

    点击特定次序的li  展现特定的页面

     

    $('.wgsb').find('.wangge_data_list li').click(function(){
     var index=$('.wgsb').find('.wangge_data_list li').index($(this));
     //alert(1);
     $('.wangge_data_list01').eq(index).css("display","block").siblings('.wangge_data_list01').css("display","none");
     alert(index);
    })


    //注意,0 或者数字不能截取,最好转成string类型

    转载于:https://www.cnblogs.com/fannn/p/7661634.html

    展开全文
  • 经典的js问题 实现点击li能够弹出当前li索引与innerHTML的函数 点击其中一项需要alert出如下结果: 按照我们平常的想法,代码应该是这样写的: var myul = document.getElementsByTagName("ul")[0]; var list...

    经典的js问题  实现点击li能够弹出当前li索引与innerHTML的函数


    点击其中一项需要alert出如下结果:



    按照我们平常的想法,代码应该是这样写的:

    var myul = document.getElementsByTagName("ul")[0];
    	var list = myul.getElementsByTagName("li");
    
    	function foo(){
    		for(var i = 0, len = list.length; i < len; i++){
    			list[i].onclick = function(){
    				alert(i + "----" + this.innerHTML);
    			}
    		}
    	}
    	foo();
    但是不巧的是产生的结果是这样的:



    索引index为什么总是4呢,这是js中没有块级作用域导致的。这里有三种解决思路


    1. 使用闭包

    	<script type="text/javascript">
    
    	var myul = document.getElementsByTagName("ul")[0];
    	var list = myul.getElementsByTagName("li");
    
    	function foo(){
    		for(var i = 0, len = list.length; i < len; i++){
    			var that = list[i];
    			list[i].onclick = (function(k){
    				var info = that.innerHTML;
    				return function(){
    					alert(k + "----" + info);
    				};
    			})(i);
    		}
    	}
    	foo();
    	</script>


    2.使用ES6中的新特性let来声明变量

    用let来声明的变量将具有块级作用域,很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效

    	<script type="text/javascript">
    
    	var myul = document.getElementsByTagName("ul")[0];
    	var list = myul.getElementsByTagName("li");
    
    	function foo(){'use strict'
    		for(let i = 0, len = list.length; i < len; i++){
    			list[i].onclick = function(){
    				alert(i + "----" + this.innerHTML);
    			}
    		}
    	}
    	foo();
    
    	</script>


    3.事件委托

    	<script type="text/javascript">
    
    	var myul = document.querySelector('ul');
    	var list = document.querySelectorAll('ul li');
    
    	myul.addEventListener('click', function(ev){
    		var ev = ev || window.event;
    		var target = ev.target || ev.srcElemnt;
    
    		for(var i = 0, len = list.length; i < len; i++){
    			if(list[i] == target){
    				alert(i + "----" + target.innerHTML);
    			}
    		}
    	});
    
    	</script>

    4.引入jquery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

    	<script type="text/javascript">
    
    	$("ul").delegate("li", "click", function(){
    		var index = $(this).index();
     		var info = $(this).html();
    		alert(index + "----" + info);
    	});
    
    	</script>
    
    	<script type="text/javascript">
    
    	$("ul").on("click", "li", function(){
    		var index = $(this).index();
     		var info = $(this).html();
    		alert(index + "----" + info);
    	});
    
    	</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}
  • jquery点击li 获取当前父节点所在类的索引 $('.jbcz').find('.content li').click(function(){ //alert($('.jbcz').find('.content').index($(this).parent().parent().parent().parent()));  //上面这种也可以...
  • <ul class="list"> <li>哈哈</li> <li>呵呵</li> <li>嘻嘻</li> <li>jj</li> </ul> ...let li = $(".list li"); li.click(...
  • jQuery获取当前元素的索引值还是很方便的,比如一大堆的li,当鼠标移上去的时候,你知道这个li是众多li中的第几个吗?
  • 如何获取ul中的li索引

    千次阅读 2018-11-06 10:55:14
    &lt;ul&gt; &lt;li&gt;1&lt;/li&gt;...我需要获取第二个li在ul中的索引值,先取到第二个元素,然后用index()方法获取当前li索引。 $("ul li:eq(1)").index
  • js点击获取当前li标签的index值

    万次阅读 2016-08-23 15:50:33
    Document ... li{ background-color: red; } window.onload=function(){ var list =document.getElementsByTagName('li'); for(var i=0;i;i++){ list[i].onclick = (functio
  • li> <ul></ul> </li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul...
  • js获取当前点击元素的索引

    千次阅读 2018-11-14 23:29:46
    获取li索引,代码如下: &amp;amp;amp;amp;amp;amp;amp;lt;ul id=&amp;amp;amp;amp;amp;amp;quot;list&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;...
  • 获取当前dom节点索引值 var $l = $("#tab_li ul li"); var index = $l.index(this); $(this).index()
  • 如何用JS获取当前标签的索引

    千次阅读 2018-11-28 16:04:51
    这样好利用索引值去获取另一个标签,进行样式更改。 最典型的运用就是图片轮播。比如这种: 点击对应点,就要显示对应的图片和文字内容。 如何把点 跟 图片及文字 对应起来呢? 靠的就是索引。 有如下结构: ...
  • jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素...
  • 下面的代码有点问题,用的是事件委托, JS方法如果获取当前LI索引值 ? index不起用 。为何 ?请指教 <!doctype html> <html> <head> <meta ...
  • 思路1:循环li列表并且获取当前li索引值 看代码: <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="msg"> <button v-on:click="getMsg()">获取表单数据</...
  • 点击li输出索引号 <ul class="nav"> <li>巧克力</li> <li>酸奶</li> <li>可可豆</li> <li>沙冰</li> </ul> var lis = document.q
  • 废话2:今天我写jQuery项目作业的时候想获取当前元素在被jQuery选择的所有元素中的索引。然后我就百度。发现百度很多描述的都是场景一的用法。但是我项目的html代码却是场景二这类结构。尝试index() (无参...
  • vue实现加载并展示后台数据的tab选项卡 vue用于渲染页面 jquery用于方法实现动态效果 <!-- change方法, 数值改变触发 --> <select v-on:change=get...-- 为name属性添加当前索引值 --> <ul v-on
  • 我在一个ul中写了五个li,现在我要获取第i个li,(i是不确定的,受其他因素会影响的哦。)请问怎样才能获取到啊
  • jquery获取当前元素的索引

    千次阅读 2011-08-24 18:45:45
    jQuery获取当前元素的索引值还是很方便的,比如一大堆的li,当鼠标移上去的时候,你知道这个li是众多li中的第几个吗? $("li").hover(function(){   alert($("li").index(this));  });
  • JQuery获取当前元素的索引值还是很方便的,比如一大堆的li,当鼠标移上去的时候,你知道这个li是众多li中的第几个 吗?代码:$("li").hover(function(){alert($("li").index(this));});.index函数还是很好用的。它的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,643
精华内容 15,857
关键字:

获取当前li的索引