почему я получаю индекс тега, а не индекс класса

Question

когда я использую .index () в функции click для класса элемента, я получаю индекс тега, а не индекс класса. здесь, когда я щелкаю элемент, есть класс .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>

Answer 1

Вы можете достичь этого, используя .index (элемент) .

 $('.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>