如何通过它在jQuery中的值来选择元素？

I have the following HTML-source

我有以下HTML源代码

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

The task is to

任务是

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

选择行中的编辑链接,该行还包含一个包含“Peter Pan”的单元格

How can I (efficiently) solve this problem?

我怎样(有效地)解决这个问题?

3 个解决方案

#1

Select the row that contains the string Peter Pan and then find the link with href attribute starting with edit and make it red:

选择包含字符串Peter Pan的行,然后找到以edit开头的带有href属性的链接并将其设置为红色:

$('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>

#2

Use this code:

使用此代码:

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

#3

If you do not care about other text in the field use :has and :contains,

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

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

but if you want the entire text to match, use filter() with a boolean function like this:

但如果你想要整个文本匹配,请使用带有布尔函数的filter(),如下所示:

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

it finds all TDs, then filters based on exact text matching, then finds the nearest ancestor TR and the link within that.

它找到所有的TD,然后根据精确的文本匹配过滤,然后找到最近的祖先TR及其中的链接。

#1