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

最新推荐文章于 2022-12-26 11:47:38 发布

nicexibeidage

最新推荐文章于 2022-12-26 11:47:38 发布

阅读量1k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/nicexibeidage/article/details/74999371

版权

情形一：

不带参数的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

nicexibeidage

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery 使用index()方法出现的问题

情形一：不带参数的index()，返回的是jQuery对象相对于其同辈元素的位置。例如：index()函数span{ color:red;} 后台前台数据库站长 $(document).ready(function(){ $("#btn").click
复制链接

扫一扫