How to get index in each function with html table

Question

I need index in each function which has class = index,

My desired result is 2 and 4 and 5, it is come from td element base index.

How can I get tdbase indexing?

If you have opinion,please let me know.

Thanks

$(".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>

What results are you getting? Have you read the documentation for the .index() method to understand what it does? — lurker
– lurker, Commented Apr 25, 2020 at 3:04

msg · Accepted Answer · 2020-04-25 03:21:25Z

2

$(this).index() is returning the index of the element relative to its parent element.

The callback function for .each() already receives the index of the element in the collection of matches, so if you want the index relative to the table you have to change the selector to a more general one and check if the element matches your condition.

$("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>

answered Apr 25, 2020 at 3:21

msg

8,2363 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luís Ramalho · Accepted Answer · 2020-04-25 03:04:50Z

1

You could do it in vanilla JavaScript like so:

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>

So, you grab all elements with class "index" with document.querySelectorAll(".index") then you convert them to an array so that you can map them and take their inner content with textContent

answered Apr 25, 2020 at 3:04

Luís Ramalho

10.2k4 gold badges54 silver badges69 bronze badges

Comments

Alberto Lopez · Accepted Answer · 2020-04-25 03:10:39Z

1

Try with: $(".index").each(function () { console.log($(this)[0].innerHTML); });

it wiil make the index the same as the value of the td.

answered Apr 25, 2020 at 3:10

Alberto Lopez

92 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2020-04-25 03:19:41Z

1

$.each() function you can pass index and current html element $(".index").each(function(i, item)

And you can get td content by text() method, $(item).text() will get current td text.

$(".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>

answered Apr 25, 2020 at 3:19

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2020-04-25 03:24:10Z

1

If you want to use javascript and spread operator it more shorter.

[...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>

answered Apr 25, 2020 at 3:24

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to get index in each function with html table

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related