使用jquery过滤器查找每个x td

kevin richard • 4 年前 • 416 次点击

我的桌子如下:

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

对于找到的每个m-s-3类,我希望得到数组中的第三个td文本,如下所示:

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

我试过了,但只得到了第一个结果:

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/49370

416 次点击

文章 [ 4 ] | 最新文章 4 年前

• 1 楼

radulfr 4 年前

我知道这个问题是专门为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>

• 2 楼

dev_junwen 4 年前

你也可以使用css选择器。

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

输出

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

• 3 楼

Jeto 4 年前

你可以简单地使用 $.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>

• 4 楼

sugars 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 在每个tr。

登录后回复