Найти каждый x td с помощью фильтра jquery

Question

У меня есть следующая таблица:

<tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>20</td>
    <td>D</td>
</tr>
<tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>
        <span>44</span>
    </td>
    <td>D</td>
</tr>
<tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>55</td>
    <td>D</td>
</tr>

Для каждого найденного класса ms-3 я хотел бы получить третий текст td в массиве, например так:

var result = [
  '20',
  '44',
  '55'
]

Я пыталсяэто, но он возвращает только первый результат:

var result= $('.m-s-3').find("td").filter(function( index ) {
  return index === 2;
}).text()
console.log(result)

Answer 1

Вы можете просто использовать $.map в сочетании с селектором nth-child:

jQuery(function($) {
  const result = $.map($('.m-s-3 td:nth-child(3)'), td => $(td).text().trim());
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>20</td>
    <td>D</td>
  </tr>
  <tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>
      <span>44</span>
    </td>
    <td>D</td>
  </tr>
  <tr class="m-s-3">
    <td>A</td>
    <td>B</td>
    <td>55</td>
    <td>D</td>
  </tr>
</table>

Answer 2

Я знаю вопрос, заданный специально для Jquery, но вот один без него.

const result = [...document.getElementsByClassName("m-s-3")]
    .map(tr => tr.cells[2].textContent.trim())

console.log(result);

<table>
  <tbody>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>20</td>
      <td>D</td>
    </tr>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>
        <span>44</span>
      </td>
      <td>D</td>
    </tr>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>55</td>
      <td>D</td>
    </tr>
  </tbody>
</table>

Answer 3

Вы также можете использовать селектор CSS.

const result = $('.m-s-3').children('td:nth-child(3)').text().split('\n').map(t => t.trim());
console.log(result);

Выходы

["20", "44", "55"]

Answer 4

var result = [];

$('.m-s-3').each(function(index) {
  result.push($(this).find('td').eq(2).text().trim());
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>20</td>
      <td>D</td>
    </tr>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>
        <span>44</span>
      </td>
      <td>D</td>
    </tr>
    <tr class="m-s-3">
      <td>A</td>
      <td>B</td>
      <td>55</td>
      <td>D</td>
    </tr>
  </tbody>
</table>

Вы можете использовать each для зацикливания каждого tr, а затем получить текст в третьем td в каждом тр.