使用 jQuery 选择嵌套元素
Posted
技术标签:
【中文标题】使用 jQuery 选择嵌套元素【英文标题】：Select nested elements with jQuery 【发布时间】：2019-07-27 07:34:28 【问题描述】：我在通过 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 元素后面的文本并测试它是否是“-”而不是外部字符串？
【问题讨论】：
这有帮助吗？ Use jQuery to select text not in an element 【参考方案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 将两种引用都呈现为"
PS：这不是实现这一目标的好方法。相反，您应该使用 ID 将第一行文本包装在一个 span 中，然后查找它是 - 还是任何其他文本。
【讨论】：
【参考方案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>【讨论】：
谢谢，很遗憾，它没有用。不过感谢您的帮助！【参考方案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 选择嵌套元素的主要内容，如果未能解决你的问题，请参考以下文章