Select 嵌套元素 jQuery

Question

我通过 jQuery 对元素进行 select 处理时遇到问题。

我有一个 HTML table 有一个特殊的字段。您可以在此处查看字段的结构：

    <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>

我知道如何通过 class 名称或元素名称或元素的第一个子元素来 select 元素。

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

Answer 1

为此，您需要查找第一个 em 之后的文本节点。为此，您可以 select jQuery 中的元素，然后从基础元素对象中检索 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 2

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

<!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 3

如果一个完整的 table 可能包含也可能不包含带有 Create Events: - 的行。然后需要迭代。对于 table 中可用的每一行，您需要获取该行的第一个 em，并检查下一个兄弟的文本内容。如果它匹配'-'，则应删除整行。

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

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

在循环中，我们确定每个 td 标签上可用的第一个 em。然后我们使用 nextSibling.nodeValue 和 trim 得到以下文本以防止额外的空格。

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 的文档。

Select 嵌套元素 jQuery

Select nested elements with jQuery

javascript

jquery

dom

jquery-selectors