CODEWITHSUNDEEP
javascriptjquerysyntaxeach
Undefined
Undefined

Reputation: 11429

Javascript/jQuery .each and syntax issue

I'm having some trouble writing a function to change a background image on a div on document.ready

I haven't made a jsfiddle as i think the problem is just my poor (but improving) jQuery skills. Please let me know if you think one is needed.

Background Info -> I have a collection of div's with a class of portlet-visible or portlet-hidden, each of these div's will have another class of red-arrow (or a different color, but once i have one color it should be easy to extrapolate). When the page loads i would like a function that can find all divs with a class of portlet-hidden or portlet-visible and see if those have a class of red-arrow. If they do then change the background image src to a different value.

Im really struggling to work this one out, and any help is much appreciated.

My HTML

<div class="portlet-visible red-arrow"></div>

My CSS

div.portlet-visible
  {
    position:absolute;
    top:12px;
    right:10px;
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
  }

And finally my javascript 

$(document).ready(function() {
        $(".portlet-hidden" && ".portlet-visible").each(function()  {
            if ($("this").hasClass(".red-arrow")) {
                $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
            };
        });

    });

Upvotes: 0

Views: 471

Answers (8)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Multiple selectors should be separated by a comma(,) and also css method takes a string or a map. Try this.

$(document).ready(function() {
        $(".portlet-hidden, .portlet-visible").each(function()  {
            if ($(this).hasClass("red-arrow")) {
                $(this).css('background-image', "url('../images/blue-arrow-up.png')")
            };
        });

    });

Upvotes: 3

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11114

First... Archer's answer is spot on-- what you're trying to do with jQuery can be done with CSS alone.

But if for some reason you do need jQuery, a few things are wrong here.

First, as justtkt said in his answer, your selector is wrong. There is no need (and is syntactically wrong) to use conditional operators like && or || in a jQuery selector. This is simply because there is already conditional syntax built in to CSS, upon which jQuery selectors are directly based.

.this-class.that-class

Selects all elements with both .this-class, and .that-class.

#this-id.that-class

Is a very (possibly overly) specific declaration that select an element (there should only be one ID per page) with both #this-id and .that-class

For more on selectors, please read this very thorough, complete, and educational link http://www.w3.org/TR/selectors/

Additionally and importantly

This line:

$("this").hasClass(".red-arrow")

Is wrong! hasClass does not require a selector (the ".") because it only takes a class. It should be 

  $("this").hasClass("red-arrow")

Also!!

 $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')

This line has some errors... should be:

 $(this).css("background-image", "url(../images/blue-arrow-up.png)")

although I think the following syntax is easier: 

css({'background-image' : 'url(../images/blue-arrow-up.png)'})

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

Unless there's a specific reason you want to do this with jQuery you should just use CSS...

div.portlet-visible
{
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
}
div.portlet-visible.red-arrow
{
    background-image:url(../images/blue-arrow-up.png);
}

Any div with the class "portlet-visible" is defined in the first block, and any div with the classes "portlet-visible" and "red-arrow" will use the same css, but also apply the new background image.

http://jsfiddle.net/johncmolyneux/gcm5b/

Upvotes: 1

dku.rajkumar
dku.rajkumar

Reputation: 18588

  1. change in selector ".portlet-hidden,.portlet-visible"
  2. change if condition to boolean from string

  3. change in css.

    $(".portlet-hidden,.portlet-visible").each(function(){
   if ($("this").hasClass("red-arrow")){
     $(this).css("background-image", "url('../images/blue-arrow-up.png')");
  }
});

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

if ('$("this").hasClass(".red-arrow")') { <--- this condition is a string here

Should be:

if ($(this).hasClass(".red-arrow")) {

Upvotes: 0

justkt
justkt

Reputation: 14776

Instead of && two selectors together, use the multiple selector like $(".portlet-hidden, .portlet-visible") or the .add() method to build up your jQuery.

Your current line is actually anding the two strings together, which I believe will return boolean true in Javascript.

Upvotes: 0

Pointy
Pointy

Reputation: 413996

Your selector is just incorrect. If you want to match things with both classes, it'd be:

$('.portlet-hidden.portlet-visible').each( ...

If you want to match either of the classes:

$('.portlet-hidden, .portlet-visible').each( ...

The expression ".portlet-hidden" && ".portlet-visible" will always evaluate to just ".portlet-visible".

Upvotes: 0

Kristian
Kristian

Reputation: 21840

I would have written the selector this way

 $(".portlet-hidden, .portlet-visible")

Upvotes: 2

Related Questions