Question

我有动态（不是DOM文档的一部分），HTML代码。像 -

这样的东西

<div class="media"> 
abc
</div>
<div class="media"> 
efg
</div>  
<div class="nvid">
   <div class="media">
qwr
   </div>    
</div>

现在我使用上面的html制作一个jQuery obj，

jq = jQuery(above html);

然后我通过使用语法 -

选择将类作为“媒体”的div

jQuery('div.media', jq).each(console.log("found"));

现在，理想情况下我应该在命令行上打印三个'found'，但我只得到一个。任何想法，我缺少什么？

Answer 1

您必须将函数传递给.each，并且您可以更好地编写此代码，因为它没有附加到DOM：

jq.filter(function(){ return $(this).hasClass('media') })
  .each(function() { console.log("found"); });

Answer 2

为清晰起见，

已修改。

使用core jQuery(selector, context)的幕后将执行.find()。阅读它所声明的docs on .find()它将搜索当前元素的子元素。

表示您的通话将执行以下操作：

选择<div class="media">abc</div>的孩子 - 0个孩子 - 并查找.media 0个结果。

选择<div class="media">efg</div>的孩子 - 0个孩子 - 并查找.media 0个结果。

选择<div class="nvid">qwr</div>的孩子 - 0个孩子 - 并查找.media 0个结果。

以DOM方式进行，将其包装在div中并执行查找：

var html = '<div class="media">abc</div>' + 
           '<div class="media">efg</div>' +
           '<div class="nvid">qwr</div>';
var obj = $(html);
//this fails:
$('div.media',obj).each(function(){console.log("found with jquery object");});

// this works as a single DOM object
var wrap = $('<div/>').append(obj).eq(0);
$('div.media',wrap).each(function(){console.log("found with DOM object");});

这个工作的原因是因为我们将你的html作为子项插入，并在父容器（包装器）上进行搜索，它得到3个子节点，并匹配其中2个子节点。

以filter()方式执行此操作并返回一个仅包含这些元素的新jquery对象：link to filter docs

obj.filter('.media').each(function(){console.log("found with Filter");});

根据您的评论，您可以执行以下操作：

$(html).filter('.media').each(function(){
   var myDiv = $(this);
   // do stuff with myDiv.html();
});

您可以结帐jsfiddle here - 现在稍微过时了。

Answer 3

问题在于你调用console.log（）的方式。即使没有找到任何东西，它也会在那里进行评估并显示。因为您没有传递对函数的引用，所以只需调用log（'found'）

你应该

jQuery('div.media', jq).each(function() { console.log("found") });

jQuery选择在jQuery对象的上下文中

3 个答案: