Question

我通过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元素后面的文本并测试它是否为“-”而不是外部字符串？

Answer 1

如果我正确理解您的问题，则可以使用正则表达式来实现所需的功能。这是我为您编写的代码。

<!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包裹在一个范围内，然后查看它是-还是其他任何文本。

Answer 2

要实现此目的，您需要在第一个em之后寻找文本节点。为此，您可以选择jQuery中的元素，然后从基础Element对象中检索nextSibling节点。

如果将逻辑放在检查节点值的filter()中，则可以简单地remove()空行，如下所示：

$('tr').filter(function() {
  return ($(this).find('td em:first')[0].nextSibling.textContent || '').trim() === '-';
}).remove();

hr { margin: 8px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <em class='block'>Create Events:</em> -
      <hr />
      <em class='block'>Update Events:</em> -
      <hr />
      <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 />
      <em class='block'>Update Events:</em> -
      <hr />
      <em class='block'>Required object:</em>
    </td>
  </tr>
</table>

Answer 3

完整表中是否包含Create Events: -行。然后将需要迭代。对于表中可用的每一行，您需要获取该行的第一个em，并检查下一个同级的文本内容。如果它与“-”匹配，则应删除整行。

首先是表及其所有行的迭代：

$('table tr').each(function(i, tr) {...}

在循环中，我们确定每个td标签上可用的第一个em。然后，我们使用nextSibling.nodeValue得到以下文本，并对其进行修剪以防止出现多余的空格。

var $em = $(tr).find('td em:first');
var createContent = $em[0].nextSibling.nodeValue.trim();

最后，我们比较内容等于“-”。您可以在下面看到完整的代码。

<table>
    <tr> 
        <td>
            <em class='block'>Create Events:</em> here is something else and this line should not get removed
            <hr />
            <em class='block'>Update Events:</em> -
            <hr />
            <em class='block'>Required object:</em>
        </td>
    </tr>
    <tr>
        <td>
            <em class='block'>Create Events:</em> -
            <hr />
            <em class='block'>Update Events:</em> -
            <hr />
            <em class='block'>Required object:</em>
        </td>
    </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('table tr').each(function(i, tr) {
            var $em = $(tr).find('td em:first');
            var createContent = $em[0].nextSibling.nodeValue.trim();

            if (createContent === '-') {
                $(tr).remove();
            }
        });
    });
</script>

您可以查看jQuery每个here的文档。

使用jQuery

3 个答案: