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
$('.content', the_selector)
will look for.content
below the nodes that matchthe_selector
, while you seem to want to extendthe_selector
with.content
.In that case you have several options, including:
$('.content').add(the_selector)
$(['.content', the_selector].join())
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
which evaluates to
and so it works!