javascript - 为什么我得到标签的索引而不是类的索引

Question

当我在元素类的点击函数中使用 .index() 时，我得到标签的索引而不是类的索引。在这里，当我单击具有类 .mobapp-right 的元素时，我得到（1 和 4）而不是（0 和 1）。

$(document).ready(function(){
   $('.mobapp-right').click(function(){
        alert($(this).index());
    });
    $('.mobapp-left').click(function(){
        alert($(this).index());
    });
});

.mobapp-right{
    cursor: pointer;
}
.mobapp-left{
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <ul > 
        <li>  </li>
        <li></li>
        <li></li>
        <li>  </li>
    </ul>
    <h1 class="mobapp-right"> right </h1>
    <h1 class="mobapp-left"> left </h1>
    <ul > 
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h1 class="mobapp-right"> right </h1>
    <h1 class="mobapp-left"> left </h1>

标签： javascriptjqueryhtmlindexing

Answer 1

您可以使用.index(element)来实现它。

 $('.mobapp-right').click(function(){
     var index = $(".mobapp-right").index(this);
     alert("index is: " + index);
    });
    
$('.mobapp-left').click(function(){
     var index = $(".mobapp-left").index(this);
     alert("index is: " + index);
});

.mobapp-right{
    cursor: pointer;
}
.mobapp-left{
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <ul > 
        <li>  </li>
        <li></li>
        <li></li>
        <li>  </li>
    </ul>
    <h1 class="mobapp-right"> right </h1>
    <h1 class="mobapp-left"> left </h1>
    <ul > 
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h1 class="mobapp-right"> right </h1>
    <h1 class="mobapp-left"> left </h1>