精华内容
下载资源
问答
  • 主要介绍了JS遍历ul下的li点击弹出li索引的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 如何获取ul中的li索引

    千次阅读 2018-11-06 10:55:14
    <ul> <li>1&.../li&...li&...我需要获取第二个liul中的索引值,先取到第二个元素,然后用index()方法获取到当前li索引。 $("ul li:eq(1)").index
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    我需要获取第二个li在ul中的索引值,先取到第二个元素,然后用index()方法获取到当前li的索引。

    $("ul li:eq(1)").index()

    $($("ul li")[1]).index()

    这两个方法就是获取元素的方式不一致

    展开全文
  • 得到ul下的li索引

    2017-07-30 17:14:09
    如何利用原生JS输出ulli的index索引值,如果按以下的写法写,则每次点击输出的都是最后一个元素的索引。  function(e){}的匿名函数,在执行时,每一个都会创建一个新的作用域。这些匿名函数不会立即执行,...

    转自这里:http://blog.csdn.net/anxiaomo1/article/details/68921367

    如何利用原生JS输出ul下li的index索引值,如果按以下的写法写,则每次点击输出的都是最后一个元素的索引。 

    function(e){}的匿名函数,在执行时,每一个都会创建一个新的作用域。这些匿名函数不会立即执行,仅仅是被定义,只有在点击时才执行,被当做参数传入addEventListener函数。所以在执行时i的值已经变为最后一个索引值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打印索引</title>
    </head>
    <body>
    <ul>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <script>
       var nodeList = document.getElementsByTagName('li');
       for (var i = 0; i < nodeList.length; i++) {
           nodeList[i].addEventListener("click", function(e) {
                alert(i);
            }, false);
       }
    </script>
    </body>
    </html>


    实现方法

    1.利用闭包实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打印索引</title>
    </head>
    <body>
    <ul>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <script>
       var nodeList = document.getElementsByTagName('li');
       for (var i = 0; i < nodeList.length; i++) {
        (function(j){
            nodeList[j].addEventListener("click", function(e) {
                alert(j)
            }, false);
        })(i) ;
    }
    </script>
    </body>
    </html>

    2.ES6实现 
    我们也可以利用ES6的let来实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打印索引</title>
    </head>
    <body>
    <ul>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <script>
       var nodeList = document.getElementsByTagName('li');
       for (let i = 0; i < nodeList.length; i++) {
           nodeList[i].addEventListener("click", function(e) {
                alert(i);
            }, false);
       }
    </script>
    </body>
    </html>


    3.利用事件委托机制 
    如果li较少的话,利用上面方式实现是可以的,但是如果li的数量过多,为每个li添加事件侦听就会对页面性能产生很大的影响,我们可以采用委托实现。 
    利用Array.prototype.slice.call(nodeList)的作用是将具有length属性的元素转为数组,这样可利用indexOf方法获取li的索引值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打印索引</title>
    </head>
    <body>
    <ul>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <script>
        var nodeList = document.getElementsByTagName('li') ,
            arrNodes = Array.prototype.slice.call(nodeList) ,
            nodeUls = document.getElementsByTagName('ul') ;
        nodeUls[0].addEventListener("click",function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            alert(arrNodes.indexOf(target))
        },false);
    </script>
    </body>
    </html>


    4.用jQuery实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打印索引</title>
    </head>
    <body>
    <ul>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <script type="text/javascript" src="E:\myPritice\webproject\janeShop\scripts\jquery.min.js"></script>
    <script>
    $(function () {
    	$('ul li').click(function(){
    		var index = $('ul li').index(this);
            console.log(index);
    	});
    }); 
    </script>
    </body>
    </html>




    展开全文
  • 首先我们需要一个html结构  <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a<...

     

     

    首先我们需要一个html结构

    复制代码
      <div >
            <ul>
                <li>a</li>
                <li>a</li>
                <li>a</li>
                <li>a</li>
                <li>a</li>
            </ul>
        </div>
    复制代码

    我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢????

    接下来看看我们的js代码

    复制代码
       var li = document.getElementsByTagName('li');
            for(var i = 0;i<li.length;i++){       
                (function(Index){
                    li[i].addEventListener('click',function(e){
                        alert('I am link #'+ Index );
                    },false);
                })(i)
           }
    复制代码

    我们实现了!!!

    这样就是得来我们想要的效果点击相应的li得来相应的索引。

    简单说一下实现的过程吧

    (function () { /* code */ } ()); // 推荐使用这个
    (function () { /* code */ })(); // 但是这个也是可以用的

    这是我整理立调函数或自执行函数;

    本质上我们是利用闭包的原理实现弹出的索引,我们立调函数传一个参数Index,也就是我们的索引i,在函数里面实现了闭包,

    Index会一直保留在作用域块内,这样我们再点击的时候,会调用作用域名内保存的索引,从而实现我们需要的功能;

     

    我们几个简单的例子

    复制代码
        function num(){
                var i = 0;
                return function(){
                    console.log(i++);
                }
            }
            var counter = num();
            console.log(counter()); // 0
         console.log(counter()); // ??
     
    复制代码

     

    复制代码
          var counter1 = (function(){
                var i = 0;
                
                return {
                    get:function(){
                        return i;
                    },
                    set:function(val){
                        i = val;
                    },
                    increment:function(){
                        return ++i;
                    }
                }
            }());
        

        console.log(counter1);
        console.log(counter1.get()); // ?
        console.log(counter1.set(3)); // ?
        console.log(counter1.increment()); // ?
        console.log(counter1.increment()); // ?

     
    复制代码

    转载于:https://www.cnblogs.com/yzhihao/p/6425464.html

    展开全文
  • <ul class="list"> <li>哈哈</li> <li>呵呵</li> <li>嘻嘻</li> <li>jj</li> </ul> let li = $(".list li"); li.click(...
    <ul class="list">
        <li>哈哈</li>
        <li>呵呵</li>
        <li>嘻嘻</li>
        <li>jj</li>
    </ul>
                    
    
    let li = $(".list li");
    
    li.click(function() {
    
        console.log($(this).index());
    });
    
    

    转载于:https://www.cnblogs.com/xiaqilin/p/8668592.html

    展开全文
  • 主要介绍了jQuery在ul中显示某个li索引号的方法,涉及jQuery遍历元素的技巧,非常具有实用价值,需要的朋友可以参考下
  • ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 复制代码2.js实现部分 1.使用立即执行函数 var liList = document.getElem...
  • 如何利用原生JS输出ulli的index索引值,如果按以下的写法写,则每次点击输出的都是最后一个元素的索引。  function(e){}的匿名函数,在执行时,每一个都会创建一个新的作用域。这些匿名函数不会立即执行,仅仅是...
  • 给定一个ul,其中有10w个li。要求点击li时给出索引值。
  • 有一个ulul里面有几个li,如果需要点击li打印出此li对应的索引号该怎么做呢?  最开始的想法是: <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>...
  • 第二种方法 (给每个li加一个索引) let list = document . getElementsByClassName ( 'my-li' ) for ( let i = 0 ; i < list . length ; i ++ ) { list [ i ] . index = i ; list [ i ]...
  • ul 下的li点击事件显示索引
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...打印索引</title> </head> <style type="text/css"> li{background: pink;margi...
  • 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}
  • ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 2.js实现部分: 1.使用立即执行函数 var liList = document.getElementsByTagName('li...
  • li> <?php echo $f_name ?> </li> <li> <?php echo $l_name ?> </li> ..... <li> <?php echo $email ?> </li> <li> <?php echo $web ?> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 668
精华内容 267
关键字:

liul索引