Question

我有以下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>

任务是

选择同时包含“Peter Pan”
的单元格的行中的编辑链接

我如何（有效地）解决这个问题？

Answer 1

选择包含字符串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>

Answer 2

使用此代码：

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

Answer 3

如果您不关心字段中的其他文字，请使用:has和: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及其中的链接。

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

3 个答案: