CODEWITHSUNDEEP
javascriptjqueryhtml
user1014022
user1014022

Reputation: 1

Basic javascript jquery

I’m trying to teach myself basic html with JavaScript using the Jquery library. With the code below I'm trying to change the p tags within the div red and the other p tags outside of the div yellow. The code below changes all the p tags yellow but when I place 4. above 3. it works. Just need a simple explanation why and also this is the html code http://imageshack.us/photo/my-images/29/k9do.jpg/ 

$(document).ready(function() {
    $("#testbutton").click(function() {
        $("div  p").css("background-color" , "red");
        $("p").css("background-color" , "yellow");
    });
});

Upvotes: 0

Views: 156

Answers (10)

Matt B
Matt B

Reputation: 116

You're thinking about this problem the wrong way. If those style directions were all in a CSS file, the div p direction would trump the p direction, so the inner <p> would be red and the outer <p> would be yellow.

However, that's not what we're doing here. jQuery runs after the CSS has loaded initially, and doesn't care (or need to care) about page-wide CSS style rules; ALL styling changes that we make with jQuery will override the pre-set styles.

Let's look at what you wrote. Your first command,

$("div p").css("background-color" , "#FF0000");

translates into English as "Take all <p> tags that exist inside <div> tags and set their background color to red". Your second command,

$("p").css("background-color" , "yellow");

takes all <p> tags (including the ones we just turned red) and turns them yellow.

Upvotes: 1

eyecatchUp
eyecatchUp

Reputation: 10560

The reason is: Each JavaScript statement is executed in the sequence/order they are written.

So, in your case, the first statement will change the background color of all p tags within a div to red first. But the second statement will change the background color of all p tags to yellow. So, the second statement overwrites the previous changes, made by the first statement.

And that also explains, why, when you change those lines, it works as expected. Because in that case, the first statement will change the background color for all p tags to yellow. And, afterwards, the second statement will change the background color only for those p tags within a div tag to red.

Update: You can, alternatively, use something like this:

$('p').each(function(){
    var clr = ('DIV' === $(this).parent()[0].nodeName) ? 'red' : 'yellow';
    $(this).css('background-color', clr);
});

This code loops over all p tags, and set the background color based on the tag name of its parent element. If it's a div, it will use red, otherwise yellow. Here's a demo: jsfiddle.net/3dL7r

Upvotes: 1

iConnor
iConnor

Reputation: 20209

In English,

First your colouring the <p> tags inside the <div> tags red. Secondly your colouring all the <p> tags yellow. so of course there all going to be yellow. You have to remember that styles in JavaScript don't act like CSS in relevance to priority. JavaScript adds the CSS style to inline style="" attribute so the only thing that will over-ride the style's is an !important witch you should not use.

so the reason it works when you put 4 above 3 is because the you are colouring all the <p> tags yellow, then specifically colouring the ones in the <div> tag red.

so basically any styles that are added to the element last in JavaScript will override the previous unless !important is used

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

You need to first define outside p tags element with background , if you define it after p tags inside div it will replace that div with yellow color.

$("#testbutton").click(function() {
     $("p").css("background-color" , "yellow");
     $("div p").css("background-color" , "#FF0000");
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73976

Let me explain this

$("div p").css("background-color" , "red");

The above code will set the background-color red for all the p tags inside the div tag.

Now,

$("p").css("background-color" , "yellow");

The above code will set the background-color yellow for all the p tags, inside and outside the div tag too.

Now, when you do the reverse process, doing

$("p").css("background-color" , "yellow");

sets the background-color yellow for all the p tags, inside and outside the div tag first.

Next, doing this

$("div p").css("background-color" , "red");

sets the background-color red for all the p tags inside the div tag, but not the p tags outside the div. Hence this one works but not the first way.

Upvotes: 2

Adam Hopkinson
Adam Hopkinson

Reputation: 28793

This is more about css specificity. In line 3, your selector div p is setting all p that are within a div to red. In line 4 you are overriding this by setting all p to yellow (whether or not they are in a div).

Upvotes: 0

MassivePenguin
MassivePenguin

Reputation: 3511

The $("div p") on line 3 targets all p tags inside a div (that's the cascading selector - the second tag must be inside the first) while the $("p") on line 4 targets all paragraph tags. The best way to have the different colours is indeed to move 4 above 3 - 3 is more specific.

Upvotes: 0

Chirag Vidani
Chirag Vidani

Reputation: 2587

$("div p").css("background-color" , "red");

The above line of code changes p (found) nested under div. Its the syntax of css.

$("p").css("background-color" , "yellow");

The above line of code changes all p tags found in DOM of HTML

Upvotes: 0

zany
zany

Reputation: 981

jQuerys css() functions sets the style attribute. Thus order mattes as both calls will set that attribute on some element and override each other.

Upvotes: 0

Alberto Zaccagni
Alberto Zaccagni

Reputation: 31590

4 ("div p") is more generic than 3 ("div p"), so if you put 4 after 3 you will first color every p nested in a div in red, but immediatly after you'll color it in yellow, since that is what you're saying in 4

Upvotes: 0

Related Questions