Question

我正在尝试查找具有类的元素。我正在使用以下代码。为什么不起作用？我该如何运作？

$('<div/>').html("<div class=\"markdown\"></div>").contents().find(".markdown")

我正在尝试获取字符串中具有markdown类的所有元素。

Answer 1

没有内容，您可以这样获得 .markdown 元素：

$('<div/>').html("<div class=\"markdown\"></div>").find('.markdown')

内容获取匹配元素集中每个元素的子元素，包括文本和注释节点。（https://api.jquery.com/contents/）

let markdownElement = $('<div/>').html("<div class=\"markdown\"></div>").find(".markdown");

console.log(markdownElement[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

contents返回调用元素的内容。 find仅查看孩子和其他后裔，但在您的情况下，contents返回实际的div.markdown（因为包装div的内容）。

如果您的起点是包装器div，则只需使用this answer中所示的find。

如果您的出发点是包装器div的内容（在您的示例中，我假设您出于某种原因使用了contents），请在这种情况下找到它，您将使用filter，而不是find：

const result = $('<div/>').html("<div class=\"markdown\"></div>").contents().filter(".markdown");
console.log(result[0].outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

无论是否位于顶层，您都可以使用以下组合：

const contents1 = $('<div/>').html("<div class=\"markdown\">top level</div>").contents();
const contents2 = $('<div/>').html("<div><div class=\"markdown\">nested</div></div>").contents();

const results1 = contents1.filter(".markdown").add(contents1.find(".markdown"));
console.log(results1[0].outerHTML); // 1

const results2 = contents2.filter(".markdown").add(contents2.find(".markdown"));
console.log(results2[0].outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何从字符串中找到带有类的元素？

2 个答案: