jquery 使用index()方法出现的问题

来源：互联网发布：sql 查询分析器编辑：程序博客网时间：2024/05/18 04:58

情形一：

不带参数的index()，返回的是jQuery对象相对于其同辈元素的位置。

例如：

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title>index()函数</title><style type="text/css">span{  color:red;}</style><script type="text/javascript" src="js/jquery-3.1.1.js"></script></head><body>  <div>    <p>后台</p>    <div class="qian">前台</div>    <p>数据库</p>    <div>站长</div>  </div>  <script type="text/javascript">    $(document).ready(function(){      $("#btn").click(function(){        $("span").text($(".qian").index());      })    });  </script>  <div>当前div元素的位置:<span>0</span></div>  <button id="btn">点击查看结果</button></body></html>

弹出的结果是：1，可以看出是'.qian'相对于 ‘后台’ 的p标签，‘数据库’的p标签和‘站长’的div的位置

情形2：

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title>index()函数</title><style type="text/css">span{  color:red;}</style><script type="text/javascript" src="js/jquery-3.1.1.js"></script></head><body>    <p>后台专区</p>    <div class='div1'>        <p>后台专区1</p>        <div id='div2'>后台专区2</div>        <div id="qian">前台专区</div>    </div>       <p>数据库专区</p>    <div class='qian1'>站长交流</div>  <script type="text/javascript">    $(document).ready(function(){      $("#btn").click(function(){        $("span").text($('div').index(document.getElementById('div2')));      })    });  </script>  <div>当前div元素的位置:<span></span></div>  <button id="btn">点击查看结果</button></body></html>

结果是：1，返回的是相当于符合document.getElementById('div2')的div元素的同级元素的位置
如果传递的参数换成document.getElementById('qian')，结果会是：2

情形3：

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title>index()函数</title><style type="text/css">span{  color:red;}</style><script type="text/javascript" src="js/jquery-3.1.1.js"></script></head><body>    <p>后台专区</p>    <div class='div1'>     <p>后台专区1</p>     <div class='div2'>后台专区2</div>     <div class="qian">前台专区</div>   </div>      <p>数据库专区</p>   <div class='qian1'>站长交流</div>  <script type="text/javascript">    $(document).ready(function(){      $("#btn").click(function(){        $("span").text($('.qian').index('div'));      })    });  </script>  <div>当前div元素的位置:<span></span></div>  <button id="btn">点击查看结果</button></body></html>

结果是：2，返回的是.qian在所有div中的索引

如果将红色字体改成$('.div1').index('div') 结果是：0

如果将红色字体改成$('.div2').index('div') 结果是：1

如果将红色字体改成$('.qian1').index('div') 结果是：3

阅读全文

0 0

jquery 使用index()方法 出现的问题

jquery 使用index()方法出现的问题