在td旁边的HTML表格中查找td文本

Question

我试图在表td内的文本“我的元数据”的td旁边找到文本。 我试图遍历表tds等来找到这个。 有没有什么非常简单的方法可以在td内的td内搜索带有某些值的文本？

这是我的小提琴

<table id="searchTable">
  <tr>
    <td>
      My Metadata
    </td>
    <td>
      I want to alert this td text which is next to td which has text My Metadata
    </td>
  </tr>
</table>

Answer 1

您可以使用:contains()和next()

• 使用:contains()选择器，您可以获取包含某些文本的元素。
• 然后使用next()获取它旁边的兄弟姐妹。

 var text = $('#searchTable td:contains(My Metadata)') // get td which contains the text .next() // get sibling next to it .text(); // get text content in it console.log(text); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="searchTable"> <tr> <td> My Metadata </td> <td> I want to alert this td text which is next to td which has text My Metadata </td> </tr> </table> 

---

如果要选择完全匹配的元素，请使用filter()

 var text = $('#searchTable td').filter(function() { return $.trim($(this).text()) == 'My Metadata'; // check trimmed content and filter based on that }) .next() // get sibling next to it .text(); // get text content in it console.log(text); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="searchTable"> <tr> <td> My Metadata </td> <td> I want to alert this td text which is next to td which has text My Metadata </td> </tr> </table> 

---

更新：如果html内容在变量中，则可以执行以下操作。

 var content = `<table id="searchTable"> <tr> <td> My Metadata </td> <td> I want to alert this td text which is next to td which has text My Metadata </td> </tr> </table>`; var text = $(content).find('td:contains(My Metadata)') // get td which contains the text .next() // get sibling next to it .text(); // get text content in it console.log(text); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

您可以使用:contains选择器和next() ，如图所示。

$('#searchTable td:contains("My Metadata")').next().text()

:contains("My Metadata")选择器将在#searchTable文本My Metadata #searchTable中选择td ，而.next()将选择它的下一个节点，而.text()将在td中警告文本。

 alert($('#searchTable td:contains("My Metadata")').next('td').text()) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="searchTable"> <tr> <td> My Metadata </td> <td> I want to alert this td text which is next to td which has text My Metadata </td> </tr> </table> 

Answer 3

您可以使用:contains()选择器选择包含指定字符串的所有元素作为innerText，然后使用next()获得该元素的下一个同级元素。

$('td:contains("My Metadata")')  // Select `<td>` that contains the passed string
    .next()                      // Get the immediate next sibling
    .text();                     // Get inner text

演示

 alert($('td:contains("My Metadata")').next().text().trim()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="searchTable"> <tr> <td> My Metadata </td> <td> I want to alert this td text which is next to td which has text My Metadata </td> </tr> </table>