Question

我只是想知道是否有办法做到以下几点。我有一个包含以下HTML代码的页面。

<div class="container">
 <div class="tab"></div>
 <div class="tab"></div>
 <div class="tab"></div>
</div>

我有一个脚本代码，用于检查点击了哪个标签。

$(function(){

$('body').on('click','.tab',function(){ 
// check which tab is clicked
//do something });

});

我想要做的是获取点击容器的哪个子项。假设我点击第二个标签，我可以知道点击了哪个孩子。如果单击选项卡2我想要做某事，如果单击选项卡3我想要做其他事情。

Answer 1

您可以使用index()方法：

$('body').on('click','.tab',function(){ 
     var tabIdx = $(this).index() + 1;

     switch (tabIdx)
     {
         case 1:
             // do something for 1
             break;
         case 2:
             // do something for 2
             break;
         case 3:
             // do something for 3
             break;
     }
});

请参阅Documentation

Answer 2

http://api.jquery.com/index/

$(".tab").click(function() { 
    console.log($(this).index());
});

Answer 3

是的，使用index()，它从其兄弟元素中返回元素的从零开始的索引：

$('body').on('click','.tab',function(){ 
    var clicked = $(this).index();
    switch (clicked) {
        // if the index is 0, call functionOne():
        case 0:
            functionOne();
            break;
        // if the index is 0, call functionTwo():
        case 1:
            functionTwo();
            break;
        // if the index is is not identified,
        // use the default, and call functionDefault():
        default:
            functionDefault();
            break;
    }
});

参考文献：

index()。

Answer 4

您可以使用索引方法获取所点击元素的index，然后

$(document).on('click', '.tab', function(){
   var tabNum = $(this).index(); // 0 based index of the tab
});

Fiddle here

Answer 5

以下代码可以帮助

$(".tab").click(function() { 
  alert($(this).index());
 });

我认为这是有效的。

从javascript / jquery中选择第n个子元素

5 个答案: