如何在 jQuery 中捕获索引

Question

我想使用该index()方法获取元素的索引。我准备了这段代码，但这个函数总是返回-1. 我想了解一下：

1. 为什么这个函数返回-1

2. 如何修复它以获得正确的索引？

如果您有什么意见，请告诉我。

谢谢

const $days = $(this).find('.day');

$("#calendar .day").on("click", function() {

  console.log("index", $days.index(this));

});

td {

  padding: 10px;

  border: solid black 1px;

}

table {

  border-collapse: collapse;

}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>

  <table>

    <tr>

      <td id=1 class=day>1</td>

      <td id=2 class=day>2</td>

      <td id=3 class=day>3</td>

      <td id=4 class=day>4</td>

      <td id=5 class=day>5</td>

      <td id=6 class=day>6</td>

      <td id=7 class=day>7</td>

    </tr>

  </table>

</div>

Answer 1

您无需使用 jQuery 即可完成此操作。let&nbsp;index&nbsp;=&nbsp;[...this.parentElement.childNodes].indexOf(this);

Answer 2

问题是因为this第一行引用了windowElement，所以find('.days')不返回任何内容。因此索引始终为-1。index()要解决此问题，只需在单击的元素上使用：const $days = $("#calendar .day").on("click", function() {&nbsp; console.log("index", $(this).index());});td {&nbsp; padding: 10px;&nbsp; border: solid black 1px;}table {&nbsp; border-collapse: collapse;}<script src="https://code.jquery.com/jquery-3.3.1.js"></script><div id="calendar">&nbsp; <table>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td id="1" class="day">1</td>&nbsp; &nbsp; &nbsp; <td id="2" class="day">2</td>&nbsp; &nbsp; &nbsp; <td id="3" class="day">3</td>&nbsp; &nbsp; &nbsp; <td id="4" class="day">4</td>&nbsp; &nbsp; &nbsp; <td id="5" class="day">5</td>&nbsp; &nbsp; &nbsp; <td id="6" class="day">6</td>&nbsp; &nbsp; &nbsp; <td id="7" class="day">7</td>&nbsp; &nbsp; </tr>&nbsp; </table></div>

Answer 3

当你构建 jQuery 元素列表时.day，它应该是const&nbsp;$days&nbsp;=&nbsp;$("#calendar&nbsp;.day");在全局级别，this将是对它的引用window，并且 jQuery 将无法使用它。因此，您得到的-1意思是该元素不在列表中。