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