How do I change the p tag text color css attribute using jQuery? I don't want to change all p tags, just a particular one....

Is this possible without adding an id for every p tag?

<div class = "custimage"><img src = "img/notch.jpg" alt = "notch"/><p>Notch</p></div>
<div class = "custimage"><img src = "img/peak.jpg" alt = "peak"/><p>Peak</p></div>
<div class = "custimage"><img src = "img/shawl.jpg" alt = "shawl"/><p>Shawl</p></div>

EDIT:

I want it so that when the user clicks on a particular custimage, the p tag text color is changed. I have tried:

$('.custimage').click(function(e) {
               var cssObj = {
                  'background-color' : '#fff'
               }
               $(this).css(cssObj);
               $('this p').css({color: '#000'});
});

This doesn't work. Using $('.custimage p').css({color: '#000'});changes the colour of the text in all the images...

How do I change the p tag text color css attribute using jQuery? I don't want to change all p tags, just a particular one....

Is this possible without adding an id for every p tag?

<div class = "custimage"><img src = "img/notch.jpg" alt = "notch"/><p>Notch</p></div>
<div class = "custimage"><img src = "img/peak.jpg" alt = "peak"/><p>Peak</p></div>
<div class = "custimage"><img src = "img/shawl.jpg" alt = "shawl"/><p>Shawl</p></div>

EDIT:

I want it so that when the user clicks on a particular custimage, the p tag text color is changed. I have tried:

$('.custimage').click(function(e) {
               var cssObj = {
                  'background-color' : '#fff'
               }
               $(this).css(cssObj);
               $('this p').css({color: '#000'});
});

This doesn't work. Using $('.custimage p').css({color: '#000'});changes the colour of the text in all the images...

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 20, 2011 at 21:43 user559142 asked Oct 20, 2011 at 21:36 user559142user559142 12.5k5151 gold badges120120 silver badges180180 bronze badges 3

• 2 Which one do you want to change, and what constants can be used to find it (i.e. the paragraph next to a certain image, the last one, the 3rd one, the one with the text "Shawl" etc.)? – No Results Found Commented Oct 20, 2011 at 21:38
• It would be the one that the user has clicked on – user559142 Commented Oct 20, 2011 at 21:43
• OK yeah, that's pretty important - you should have included that in your original post - now you have 6 guess answers (3 deleted) because people jump all over the easy jquery questions. – No Results Found Commented Oct 20, 2011 at 21:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You should be able to change the color of the p tag inside the clicked .custimage div like this:

$('.custimage').click(function(e) {
    $(this).find('p').css({color: '#000'});
});

The .find() function traverses down the DOM tree to find any tag that matches the given selector. You can read more about the .find() function at http://api.jquery./find/

$(".custImage p") would get you all p tag's within a div with that class. You could then do what you want. If you give me more information I'll give you a better selector.

$('p').each(function(index) {
    //Lets say you want to target P number 2
    if(index = "2")  {
        $(this).css('color','red');
    }
});

or you could target the image or alt tag.. would that work for you?

To change a specific 'p' using text contents as a selector -

$("p:contains('Notch')").css("color","red");

to get the one inside the div with class .custimage that was clicked -

$('.custimage').click(function(e) {$(this).find('p').css("color","red")});