Find td text in HTML table next to a td

Question

I am trying to find the text inside table td next to a td with text "My Metadata". I am trying to loop through table tds etc. to find this. Is there any very simple way to search text inside td which is next to td with some value?

Here is my fiddle

<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

You can use :contains() and next()

• Using :contains() selector you can get element which contains certain text.
• Then use next() to get the sibling next to it.

 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> 

---

If you want to select element with exact match then use 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> 

---

UPDATE : If the html content is in variable , then you can do the following.

 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

You can use :contains selector and next() as shown.

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

:contains("My Metadata") selector will select td inside #searchTable having text My Metadata and .next() will select it's next node and .text() will alert the text inside 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

You can use :contains() selector to select all the elements that contains specified string as innerText and next() to get the immediate next sibling of the element.

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

Demo

 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>