如何在 jQuery 中捕获索引

Question

我想使用该index()方法获取元素的索引。我准备了这段代码，但这个函数总是返回-1. 我想了解一下：为什么这个函数返回-1如何修复它以获得正确的索引？如果您有什么意见，请告诉我。谢谢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 index = [...this.parentElement.childNodes].indexOf(this);

Answer 2

问题是因为this第一行引用了windowElement，所以find('.days')不返回任何内容。因此索引始终为-1。

index()要解决此问题，只需在单击的元素上使用：

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

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

});

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 3

当你构建 jQuery 元素列表时.day，它应该是

const $days = $("#calendar .day");

在全局级别，this将是对它的引用window，并且 jQuery 将无法使用它。因此，您得到的-1意思是该元素不在列表中。