Как получить индекс в каждой функции с таблицей html

Question

Мне нужен индекс в каждой функции, которая имеет класс = 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

Если вы хотите использовать 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 2

$(this).index() возвращает индекс элемента относительно его родительского элемента .

Функция обратного вызова для .each() уже получает индекс элемента в наборе совпадений, поэтому, если вы хотите индекс относительно таблицы, вы должны изменить селектор на более общий и проверьте, соответствует ли элемент вашему условию.

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

Попробуйте с помощью: $(".index").each(function () { console.log($(this)[0].innerHTML); });

это сделает индекс таким же, как значение td.

Answer 4

$.each() функция позволяет передавать индекс и текущий html элемент $(".index").each(function(i, item)

И вы можете получить содержимое td методом text(), $(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>

Answer 5

Вы можете сделать это в ванили 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>

Итак, вы захватываете все элементы с классом "index" с помощью document.querySelectorAll(".index"), а затем конвертируете их в массив, чтобы вы могли отобразить их и взять их внутренние содержимое с textContent