如何使用 html 表在每個 function 中獲取索引

Question

我需要每個 function 中的索引，其中 class = index ，

我想要的結果是2和4和5 ，它來自td元素基本索引。

如何獲得td基礎索引？

如果你有意見，請告訴我。

謝謝

 $(".index").each(function(){ let index=$(this).index()+1 console.log(index); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td class="index">2</td> <td>3</td> </tr> <tr> <td class="index">4</td> <td class="index">5</td> <td>6</td> </tr> </table>

Answer 1

$(this).index()返回元素相對於其父元素的索引。

.each()的回調 function 已經收到匹配集合中元素的索引，因此如果您想要相對於表的索引，您必須將選擇器更改為更通用的選擇器並檢查元素是否符合您的條件.

 $("td").each(function(idx) { if ($(this).is('.index')) { console.log(idx + 1) } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td class="index">2</td> <td>3</td> </tr> <tr> <td class="index">4</td> <td class="index">5</td> <td>6</td> </tr> </table>

Answer 2

如果您想使用 javascript 並傳播運算符，它會更短。

[...document.querySelectorAll(".index")].map((item, index)=>{
  console.log(item.textContent);
});

 [...document.querySelectorAll(".index")].map((item, index)=>{ console.log(item.textContent); });

 <table> <tr> <td>1</td> <td class="index">2</td> <td>3</td> </tr> <tr> <td class="index">4</td> <td class="index">5</td> <td>6</td> </tr> </table>

Answer 3

你可以像這樣在香草 JavaScript 中做到這一點：

 let indices = document.querySelectorAll(".index"); console.log(Array.from(indices).map((i) => i.textContent));

 <table> <tr> <td>1</td> <td class="index">2</td> <td>3</td> </tr> <tr> <td class="index">4</td> <td class="index">5</td> <td>6</td> </tr> </table>

因此，您使用 class "index" 和document.querySelectorAll(".index")獲取所有元素，然后將它們轉換為數組，以便您可以 map 它們並使用textContent獲取它們的內部內容

Answer 4

嘗試： $(".index").each(function () { console.log($(this)[0].innerHTML); });

它會使索引與 td 的值相同。

Answer 5

$.each() function 你可以傳遞索引和當前 html 元素$(".index").each(function(i, item)

您可以通過text()方法獲取 td 內容， $(item).text()將獲取當前的 td 文本。

$(".index").each(function(i, item){
let index=$(item).text();
console.log(index);
});

 $(".index").each(function(i, item){ let index=$(item).text(); console.log(index); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td class="index">2</td> <td>3</td> </tr> <tr> <td class="index">4</td> <td class="index">5</td> <td>6</td> </tr> </table>