Question

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…

Answer 1

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.com/find/