JQuery：如何从没有根元素的 HTML 数据中按类名获取 div

Posted 2023-03-16

【中文标题】JQuery：如何从没有根元素的 HTML 数据中按类名获取 div

【英文标题】：JQuery: How to get divs by class name from HTML data without root element

【发布时间】：2011-11-21 09:15:12

【问题描述】：

我有这样的html数据：

<div class="class1">...</div>
<div class="class1 class2">...</div>
<div class="class3">...</div>
...
<div class="class1">...</div>
<div class="class1 class2">...</div>
<div class="class3">...</div>

我怎样才能得到class1的div，然后是class2的div？

我试过这样：

var divs = $(data).find('.class1');

但它返回的是空数组。

我尝试了其他方法：

var divs = $(data).filter('.class1');

但是它返回了数组

[div.class1, div.class1, ..., div.class1]. 

所以，我找不到包含 'class2' 的 div，因为 'class2' 丢失了……太奇怪了……

有人有想法吗？ 谢谢！

【问题讨论】：

data 来自哪里？

得到数据后你想做什么。 Loop 成功了吗？

似乎有效：jsfiddle.net/gilly3/NBPSS。或者也许我不理解你的问题。你能澄清一下吗？或者发布一个 jsFiddle 来说明你的问题？

是的，大卫。我想获取类名为“class1”的 div 数组。然后我需要循环它来选择类名为“class2”的div并处理一些函数。所以，我不应该直接获取类名为“class2”的 div。

【参考方案1】：

当您在集合上调用 filter 时，您只会获得与该过滤器匹配的元素。但是，原始集合没有被修改。

您所要做的就是将原始集合存储在一个变量中，并在您想通过.class2 过滤时参考它：

var all = $(data),
    class1 = all.filter('.class1'),
    class2 = all.filter('.class2');

【参考方案2】：

$("div[class*='class1']");

要测试，请运行以下代码：

var divs = $("div[class*='class1']");

divs.each(function() 
    alert($(this).text());
);

【讨论】：

它只返回带有 'div.class1' 的数组，而不是带有 'div.class1 class2' 的数组。

所以，可以使用var divs = $("div[class^='class1']");，但它不是可靠的样式。

var divs = $("div[class*='class1']");该代码将起作用。 *= 将在 class 属性中搜索 class1。我编辑了原始帖子以包含 *=

【参考方案3】：

find 不起作用的原因可能是因为你的 HTML 字符串没有根元素，所以搜索是在每个元素内部执行的。如果您将 HTML 包装在包含元素中，find 应该可以工作。

【讨论】：

是的，我知道。我可以使用$j('<div></div>').append(data).find('.class1'); 但是了解替代方式更有趣。

我猜，这种方式是最方便的。好吧，我投票赞成这个答案。