How can I identify an element with no class/ID and won't always be the same nth child?

Question

I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.

The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.

The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?

It would be helpful to see an example or two of the table you'd be dealing with — j08691, Dec 03 '20 at 21:41
So why not give some example tables.... Your description does not help... — epascarello, Dec 03 '20 at 21:41
`jQuery` offers the `:contains()` pseudoselector that you could use to find the preceeding td that contains some constant text. Once you find that td you can `next()` to get to the immediately proceeding td that you actually want. https://api.jquery.com/contains-selector/#contains1 — Taplar, Dec 03 '20 at 21:43
Does this answer your question? [Find td with specific text, and operate on the td right after that one?](https://stackoverflow.com/questions/21339462/find-td-with-specific-text-and-operate-on-the-td-right-after-that-one) — Heretic Monkey, Dec 03 '20 at 22:29

mahan · Answer 1 · 2020-12-03T22:21:35.073

You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.

const tds = document.querySelectorAll("td")
for (let td of tds) {
  if (td.innerText.includes("Larry")) {
    const element = td.nextElementSibling
    console.log(element.innerText)
    break;
  }
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

If you like jQuery, use this.

const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Pirate · Accepted Answer · 2020-12-03T22:20:38.437

You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.

$(document).ready(function() {
  var yourVal = $('td:contains("2.2")').next('td').text();
  console.log(yourVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
  </tbody>
</table>

How can I identify an element with no class/ID and won't always be the same nth child?

2 Answers2