jquery selection in context of a jQuery object

Question

I have an on the fly (not part of the DOM document), HTML code. Something like-

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

now i make a jQuery obj for the above html using,

jq = jQuery(above html);

then i select the divs having class as 'media' by using the syntax-

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

now, ideally i should get three 'found' printed on the command line, but i am getting only one. any ideas, what i am missing?

Please use the provided code formatting options to make reading your code easier. — Scott
– Scott, Commented Jun 20, 2011 at 9:42
-1 I've done it, but I suspect its not what you want. Please revisit your question and format it correctly. — Mutation Person
– Mutation Person, Commented Jun 20, 2011 at 9:45
Straight from the help box to your right: indent code by 4 spaces — Felix Kling
– Felix Kling, Commented Jun 20, 2011 at 9:45
print out your jq object, see what is in it. the JQuery(above html) html is not in your code, maybe add it, so we can see your markup of that — Nealv
– Nealv, Commented Jun 20, 2011 at 9:48

pimvdb · Accepted Answer · 2011-06-20 09:52:16Z

3

You must pass a function to .each, and you could better code along the lines of this this, because it isn't attached to the DOM:

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

answered Jun 20, 2011 at 9:52

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ghostCoder Over a year ago

i cant use filter. i have to select. see the edited html code. for this, i need to find all 3 divs with class media and then do something with their innerHTML.

WSkid · Accepted Answer · 2011-06-20 10:50:10Z

1

Edited for clarity.

Behind the scenes using the core jQuery(selector, context) will perform a .find(). Reading the docs on .find() it states it will search the current elements' children.

Meaning your call will do the following:

Take <div class="media">abc</div>'s children -- 0 children -- and look for .media 0 results.

Take <div class="media">efg</div>'s children -- 0 children -- and look for .media 0 results.

Take <div class="nvid">qwr</div>'s children -- 0 children -- and look for .media 0 results.

To do it the DOM way, wrap it in a div and do your find:

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");});

The reason this works is because we insert your html as children, and do the search on the parent container (wrapper) and it gets 3 children, and it matches 2 of those children.

To do it the filter() way and return a NEW jquery object with just those elements: link to filter docs

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

Based on your comment you can do something like:

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

You can checkout the jsfiddle here - slightly outdated now.

edited Jun 20, 2011 at 10:50

answered Jun 20, 2011 at 10:02

WSkid

2,7762 gold badges22 silver badges26 bronze badges

3 Comments

ghostCoder Over a year ago

But what i am not getting is that why is the first solution, which is so obvious, failing in this case?

ghostCoder Over a year ago

i cant use filter. i have to select. see the edited html code. for this, i need to find all 3 divs with class media and then do something with their innerHTML.

WSkid Over a year ago

Updated to explain things a bit more and add more links.

TheBrain · Accepted Answer · 2011-06-20 10:07:00Z

0

the problem is that the way you call your console.log(). it evaluates right there and shows found even if nothing is found. because you don't pass a reference to a function, you just call log('found')

you should have

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

answered Jun 20, 2011 at 10:07

TheBrain

5,6202 gold badges27 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery selection in context of a jQuery object

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest