如何通过 jQuery 中的值 select 一个元素？

Question

我有以下 HTML-source

<tr>
  <td>Peter Pan</td>
  <td>Nervland</td>
  <td>
    <a href="edit/id-for-peterP">edit</a>
    <a href="delete/id-for-peterP">delete</a>
  </a></td>
</tr>
<tr>
  <td>Wendy</td>
  <td>Nervland</td>
  <td>
    <a href="edit/id-for-wendy">edit</a>
    <a href="delete/id-for-wendy">delete</a>
  </a></td>
</tr>

任务是

choose the edit-link in the row that also contains a cell which contains "Peter Pan"

我怎样才能（有效地）解决这个问题？

Answer 1

使用此代码：

$( "td:contains('Peter Pan')");

Answer 2

Select 包含字符串 Peter Pan 的行，然后找到 href 属性以 edit 开头的 link 并将其设为红色：

$('tr:contains("Peter Pan") a[href^=edit]').addClass('red');

.red { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
  <td>Peter Pan</td>
  <td>Nervland</td>
  <td>
    <a href="edit/id-for-peterP">edit</a>
    <a href="delete/id-for-peterP">delete</a>
  </td>
</tr>
<tr>
  <td>Wendy</td>
  <td>Nervland</td>
  <td>
    <a href="edit/id-for-wendy">edit</a>
    <a href="delete/id-for-wendy">delete</a>
  </td>
</tr>
</table>

Answer 3

如果您不关心字段中的其他文本，请使用 :has and :contains、

var anchor = $('tr:has(td:contains("Peter Pan")) a[href^=edit]');

但如果您希望整个文本匹配，请使用 filter() 和这样的布尔函数：

var anchor = $('td').filter(function(){
    return $(this).text() == "Peter Pan";
}).closest('tr').find('a[href^=edit]');

它找到所有的 TD，然后根据精确的文本匹配进行过滤，然后找到最近的祖先 TR 和其中的 link。

如何通过 jQuery 中的值 select 一个元素？

How to select an element by it's value in jQuery?

jquery

jquery-selectors