我如何识别没有 class/ID 且不会始终与第 n 个 child 相同的元素？

Question

我在 table（老派，我知道）中显示了一些文本，我正在尝试识别特定的 <td> 元素，以便我可以使用 jQuery wrap() <a href> 标记并将其转换为 link.

问题是，table 中的 <td> 中的 none 具有唯一的类或 ID，并且总会有数量未知的 <td> 在我要访问的那个之前，所以我认为我不能使用 child 的第 n 个。

可识别 <td> 的唯一独特方式是直接在其前面的 <td>，其中包含一些始终相同的文本。我可以使用 jQuery 根据其中的文本找到 <td>，然后直接定位 <td> 吗？或者有更好的方法吗？

Answer 1

您正在寻找具有独特 textContent 的的 nextElementSibling。为了找到它，遍历所有 s，然后获取 [ 的 nextElementSibling =37=] 具有独特的 textContent。当你找到它时，打破它。

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>

如果你喜欢jQuery，使用这个。

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>

Answer 2

您可以使用 jQuery 获取包含特定文本的元素，并根据需要使用单行 jQuery 代码访问下一个 td。如果没有下一个 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>

我如何识别没有 class/ID 且不会始终与第 n 个 child 相同的元素？

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

javascript

html

jquery

uniqueidentifier