如何使用 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>