skip to Main Content

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

2

Answers


  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())
    Login or Signup to reply.
  2.     $('.content', the_selector).each(function() {
    

    These are 2 different arguments hence it does not work. You should merge them into one to apply CSS to child element of a parent using template litearals

    $(`.content ${the_selector}`).each(function() {
    

    which evaluates to

    `.content .flickr_badge_image`
    

    and so it works!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search