zoukankan      html  css  js  c++  java

  • jquery获取元素索引值index()的例子

    如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 
    如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

    第一个匹配元素的 index，相对于同胞元素

    获得第一个匹配元素相对于其同胞元素的 index 位置。

    语法

    $(selector).index()

    试一下

     代码如下
    1 <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("li").click(function(){
        alert($(this).index());
      });
    });
    </script>
    </head>
    <body>
    <p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Soda</li>
    </ul>
    </body>
    </html>


    例

     代码如下
    1 <ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
    </ul>
    2 $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
    $('li').index($('#bar')); //1，传递一个jQuery对象
    $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
    $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
    $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。jquery获取元素索引值index()示例
    3
    //用于二级或者三级联动
    <div id="nav">
    <a href="http://www.111cn.net/">建站素材</a>
    <a href="http://www.111cn.net/">jquery特效</a>
    <a href="http://www.111cn.net/">脚本学堂</a>
    <a href="http://www.111cn.net/school/">网站编程</a>
    </div>
    4 $("#nav a").click(function(){
    //四个经典的用法
    var index1 = $("#nav a").index(this);
    var index2 = $("#nav a").index($(this));
    var index3 = $(this).index()
    var index3 = $(this).index("a")
    alert(index3);
    return false;
    });

    应用例子

    思路：

    页面部分当为当前状态的时候，会添加“active”样式。

    通过获取 li class="active" 的索引值，对应找到相应的图片说明信息，显示出来。

    解决：

    通过jquery的 index() 可以很轻松的实现该效果。

     代码如下
    1 <div id="carousel">
       <div id="carouselimg">
        <div id="imgcontainer">
         <a href="#" mce_href="#"><img src="" /></a>
         <a href="#" mce_href="#"><img src="" /></a>
         <a href="#" mce_href="#"><img src="" /></a>
         <a href="#" mce_href="#"><img src="" /></a>
         <a href="#" mce_href="#"><img src="" /></a>
        </div>
       </div>
       <div id="carouseltitle">
        <div class="carouseltext">
         <span>&nbsp;</span>
         <span>&nbsp;</span>
         <span>&nbsp;</span>
         <span>&nbsp;</span>
         <span>&nbsp;</span>
        </div>
        <ul>
         <li><span>1</span></li>
         <li><span>2</span></li>
         <li><span>3</span></li>
         <li><span>4</span></li>
         <li><span>5</span></li>
        </ul>
       </div>
      </div>
    2 jquery
    3 <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>
      <SCRIPT type=text/javascript>
      var carousedata = [
       {index:0,link:"http://www.111cn.net",imgsrc:"1.jpg",text:"数千款名品手机6折起"},
       {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"测试文本2"},
       {index:2,link:"http://www.111cn.net",imgsrc:"3.jpg",text:"测试文本3"},
       {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"测试文本4"},
       {index:4,link:"http://www.111cn.net",imgsrc:"py.jpg",text:"测试文本5"}
      ];
      
      
      $(document).ready(function(){
       $("#imgcontainer a").each(function(i){
        $(this).attr("href",carousedata[i].link);
        $(this).children("img").attr("src",carousedata[i].imgsrc);
       });
       
       $(".carouseltext span").each(function(i){
        $(this).text(carousedata[i].text);
       })
       
       setInterval(function(){
        var li_index = $("#carouseltitle ul li").index($("#carouseltitle ul li.active")[0]);
        $(".carouseltext span").hide();
            $(".carouseltext span").eq(li_index).show();
       },10);
      });
      </script>
  • 相关阅读:
    可多开窗口，但是不能同一个窗口多标签 keyshot
    AI符号 和 3DS 实例 有点像
    maya 显示 着色
    不懂
    Rhino 图层
    C4D 怎么学了一个多月还什么都不会
    测试音乐文件 wav mp3 mid
    CAD转CDR之类的会断点怎么解决
    javascript
    react脚手架搭建
  • 原文地址：https://www.cnblogs.com/xzzzys/p/7698287.html
Copyright © 2011-2022 走看看