Can anybody explain to me why this jquery function does not work?

Question

I made a simple code example to narrow down my issue.

If I have this code

jQuery.noConflict();
    jQuery(document).ready(function($) {
    var dosomething=function(the_selector){
        $('.content', the_selector).each(function() {
            $(this).css('background-color','red');
        });
    }
    dosomething('.flickr_badge_image');
});

it does not work but if i change it to

jQuery.noConflict();
jQuery(document).ready(function($) {
    var dosomething=function(the_selector){
        $(the_selector).each(function() {
            $(this).css('background-color','red');
        });
    }
    dosomething('.flickr_badge_image');
});    

It works

So why can i not combine 2 classes ('.content', the_selector) into one call? I used to be able to do this in jQuery. But somehow that stopped working?

$('.content',the_selector).each(function() {
    jQuery(this).css('background-color','red');
});

Of course i can call dosomething('.content,.flickr_badge_image');

But i want to understand why it does not work the way i am doing things now.

Why does it not work? What am i missing here?

Thank you for any feedback

Answer 1

$('.content', the_selector) will look for .content below the nodes that match the_selector, while you seem to want to extend the_selector with .content.

In that case you have several options, including:

• use jQuery: $('.content').add(the_selector)
• build a new selector: $(['.content', the_selector].join())