javascript - 带有jquery点击事件的嵌套div的索引？

Question

我有一个点击事件，我正在使用它来尝试获取最外层父 div 的索引，但似乎无法返回它。

以下是几个 div 的列表:

<div class="owl-item">
  <div class="icon-holder-selection" id="sel11">
    <div class="thumbnail" id="cur11">
      <img src="images/icons/11.jpg">
        <div class="icon-action">
          <span class="glyphicon glyphicon-remove remove-selection" id="11"></span>
          <span class="icon-content">Remove</span>
        </div>
     </div>
  </div>
</div>
<div class="owl-item">
  <div class="icon-holder-selection" id="sel12">
    <div class="thumbnail" id="cur12">
      <img src="images/icons/12.jpg">
        <div class="icon-action">
          <span class="glyphicon glyphicon-remove remove-selection" id="12"></span>
          <span class="icon-content">Remove</span>
        </div>
     </div>
  </div>
</div>
<div class="owl-item">
  <div class="icon-holder-selection" id="sel13">
    <div class="thumbnail" id="cur13">
      <img src="images/icons/13.jpg">
        <div class="icon-action">
          <span class="glyphicon glyphicon-remove remove-selection" id="13"></span>
          <span class="icon-content">Remove</span>
        </div>
     </div>
  </div>
</div>

我的点击事件如下所示:

$(document).on("click", ".remove-selection", function(e) {
    e.preventDefault ();

    //var index = $(this).index();

    var parent = $(this).closest('div');
    var index = $(".owl-item").index(parent);

    console.log("INDEX: " + index);

});

知道我错过了什么吗？

Answer 1

您需要为 .closest() 中的 div 提供类名 .owl-item，否则它只会返回 的直接父级span 元素。

工作演示:http://jsfiddle.net/1t6xgbth/

$(document).on("click", ".remove-selection", function(e) {
    e.preventDefault ();

    //var index = $(this).index();

    var parent = $(this).closest('div.owl-item');
    var index = $(".owl-item").index(parent);

    alert(index);
    console.log("INDEX: " + index);

});