javascript - 获取父母的兄弟姐妹号码去它的孩子是点击

Question

这是我的 HTML，当点击标签时，我想知道它的<li>兄弟姐妹编号是多少。请给我建议。

 <div id="tabs">
       <ul>
           <li class="select" ><a href="#" id="tabHotel">Hotel</a></li>
           <li ><a href="#" id="tabAirfare">Airfare</a></li>
           <li ><a href="#" id="tabPackage">Package</a></li>
       </ul>
  </div>

这是我的javascript。

// I don't want to input 1 in the function tabSelector 
// I want to get parent's sibling value automatic and 
// change somthing in li class.

$('#tabHotel').click(function(){
    tabSelector(1);
});

Answer 1

你可以使用index()。

$("#tabs").on("click", "li", function(){
   alert($(this).index());
});

在你的情况下：

tabSelector($(this).index() + 1 );

演示：

http://jsfiddle.net/P3KjZ/1/

Answer 2

我相信您可以使用 jQuery 的index()方法来实现这一点。

index() - 如果没有参数传递给 .index() 方法，则返回值是一个整数，指示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

如果在元素集合上调用 .index() 并传入 DOM 元素或 jQuery 对象，则 .index() 返回一个整数，指示传递的元素相对于原​​始集合的位置

这是一个 jsFiddle 示例。

---

对于技术数字（第一个等于 0），您将使用：

$('li').on('click', function(){
   console.log($(this).index());
});

对于文字数字（第一个元素等于一个），您只需将一个添加到索引中：

$('li').on('click', function(){
   console.log($(this).index()+1);
});

Answer 3

要获得准确的数字，您需要将 1 添加到索引中。请尝试以下一项

$("#tabs").on("click", "li", function(){
       alert($(this).index()+1)
    })