javascript - 使用 jQuery 选择嵌套元素

标签 javascript jquery dom jquery-selectors

我在通过 jQuery 选择元素时遇到问题。

我有一个包含特殊字段的 HTML 表格。您可以在此处查看该字段的结构:

    <td>
      <em class='block'>Create Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Update Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Required object:</em>
    </td>

如果第一个 em 元素后跟一个“-”(如上例所示),我想删除该行(td 元素的父元素)。

有时在这个例子中还有其他类似的东西:

    <td>
      <em class='block'>Create Events:</em>
      here is something else and this line should not get removed
      <hr style='margin: 8px 0;'>
      <em class='block'>Update Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Required object:</em>
    </td>

我知道如何按类名称或元素名称或元素的第一个子元素来选择元素。

但在这种情况下,没有任何效果。如何获取第一个 em 元素后面的文本并测试它是否为“-”而不是外部字符串?

最佳答案

如果我理解你的问题,你可以使用正则表达式来实现你想要的。这是我为您编写的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <table>
    <tr>
      <td>
        <em class='block'>Create Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Update Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Required object:</em>
      </td>
    </tr>
    <tr>
      <td>
        <em class='block'>Create Events:</em> here is something else and this line should not get removed
        <hr style='margin: 8px 0;'>
        <em class='block'>Update Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Required object:</em>
      </td>
    </tr>
  </table>

  <script>
    $('table tr td').each(function() {
      var content = '<td>' + $(this).html() + '</td>';
      var regex =
        /<td>([\s\S]+?)<em class="block">Create Events:<\/em>([\s\S]+?)-([\s\S]+?)<em class="block">Update Events:<\/em>/i;
      if (regex.test(content)) {
        $(this).closest('tr').remove();
      }
    });
  </script>
</body>

</html>

试试这个,它应该像在我这边一样有效。

注意:在正则表达式中,我使用了 " 而不是 ',因为 HTML 将这两种引用呈现为 "

P.S:这不是实现此目标的好方法。相反,您应该将第一行文本包装在带有 ID 的范围内,然后查找它是 - 还是任何其他文本。

关于javascript - 使用 jQuery 选择嵌套元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55009502/

相关文章:

javascript - 异步函数返回未定义且 $q 延迟

Javascript - 索引数组/列表中的每个元素

Java 和 JS : storing results as a Java variable

javascript - 一旦达到 10,如何将两个分数重置为 0?

javascript - JavaScript 中相同类型和值的两个字符串在与关联数组匹配时不会计算为 true

javascript - 如何使用 jQuery noty 插件返回 true 或 false?

javascript - 将 JSON 空数组转换为空字符串

jquery - 使用 Cycle2 根据事件幻灯片切换主体类

java - 如何使用Xpath java仅在 sibling 中查找节点?

javascript - 我需要在 Protractor 中关闭并打开新浏览器