Question

我有以下HTML：

.control .plus {
  cursor: pointer;
}

.control .minus {
  cursor: pointer;
}

在下面的代码中，“this”将列表与“nav”类列出：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
  <div class="control-header">SESSION LENGTH</div>
  <div class="control">
    <div class="plus">+</div>
    <div id="value">25</div>
    <div class="minus">-</div>
  </div>
</div>

我得到输出：在console.log上的-1

基本上我试图获取列表中按钮的索引...

为什么会这样？

Answer 1

使用index()方法并将this作为参数传递给单击的按钮以获取值：

$(document).on("click", "ul > li > button", function() {
     console.log($("ul > li > button").index(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li><button>Button 1</button></li>
  <li><button>Button 2</button></li>
</ul>

Answer 2

获取按钮index的方法是获取<li>的索引，因为每个button中只有一个li。就像这样：

$('ul.nav li').click(function(){
  console.log($(this).index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
 </ul>

index()函数'仅在特定父级中计算'元素（不在整个页面上）

获取元素列表中的元素索引

2 个答案: