找到带有特定文本的 td，然后在 td 之后对其进行操作？答案

【问题标题】：Find td with specific text, and operate on the td right after that one?找到带有特定文本的 td，然后在 td 之后对其进行操作？
【发布时间】：2014-02-15 20:21:04
【问题描述】：

我对 jQuery 选择器不是很熟悉，所以需要一些帮助。

我有一张这样的桌子：

<table class="test">
  <tr>
    <td>Section Heading 1</td><td>Section Text 1</td>
  </tr>
  <tr>
    <td>Section Heading 2</td><td>Section Text 2</td>
  </tr>
  <tr>
    <td>Section Heading 3</td><td>Section Text 3</td>
  </tr>
  <tr>
    <td>Section Heading 4</td><td>Section Text 4</td>
  </tr>
  <tr>
    <td>Section Heading 5</td><td>Section Text 5</td>
  </tr>
</table>

我需要做的是找到包含特定文本的td，并对其右侧的td中的文本进行操作。

例如，假设我要查找包含文本Section Heading 4 的td，并将td 中包含的文本与文本hello 连接起来，这样Section Text 4 就变成了Section Text 4 hello ..

哪些 jQuery 选择器可用于此目的？

【问题讨论】：

切克this answer

标签： javascript jquery css jquery-selectors html-table

【解决方案1】：

我最初的回答错过了更新文本的重点，这里有一个示例：

$(".test td:contains(Heading 1)")
    .next().text(function(){
        return $(this).text() + " Hello"
    });

我不相信你可以使用 append 方法，因为我认为它只适用于添加 html 标签。

【讨论】：

我在用这个 jsFiddle jsfiddle.net/h4Txd987654321@ 测试后编辑了我的答案

【解决方案2】：

首先，你要使用:contains：

jQuery( "td:contains(text)" );

然后，您可以使用.next 和.append：

jQuery( "td:contains(text)" ).next().append("Hello");

这是一个工作 sn-p 来演示用法：

jQuery(function($) {
  $("td:contains(Text to Find)").next().append(" Hello");
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 2px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some Text</td>
      <td>More Text</td>
      <td>YMT</td>
    </tr>
    <tr>
      <td>Text to Find</td>
      <td>Modify:</td>
      <td>Do nothing here</td>
    </tr>
  </tbody>
</table>

【讨论】：

@Ahmad - 它有效。您只需将所需的文本放入其中，例如：jQuery("td:contains(Heading 1)")....

【解决方案3】：

jQuery 有:contains() 伪类：

$('td:contains("Section Heading 4")').next().text(function(_,t){
    return t + ' Hello';
})

小心，:contains 区分大小写。

【讨论】：

【解决方案4】：

这应该可以...

$(function() {
    var searchText = "Section Heading 3";
    var output = "";
    $("td").each(function(i, item) {
        if($(item).html() == searchText) {
            output = $(item).html();
            output += $(item).closest("td").html()
        }
    });

    console.log(output);
});

这是一个 jsFiddle http://jsfiddle.net/5ELLM/

【讨论】：

不错的功能。我赞成，但 OP 专门询问了一个 jQuery 选择器，你没有使用它......

【解决方案5】：

var tds=$("table.test").find("td");
var td,i;
for(i=0;i<tds.size();i++) {
  td=tds.eq(i);
  if (td.text().indexOf("Section Heading 4")!=-1) {
    td.next().text(td.next().text()+"hello");
  }
}

【讨论】：

【解决方案6】：

供参考

var data ="Search string" $('#table1 td:contains('+data+')').next().text();

【讨论】：