Identify a specific class element within another div

Question

I have a series of photos on a page, which have below them some text information and some buttons:

<div class="photowrapper">
 <div class="photowrapperphoto">
  <div class="photocontainer">image</div>
  </div>
 <div class="textwrapperphoto">
  <div class="textleftwrapperphoto">
   <div class="phototitle">photo_0001</div>
   <div class="photoprice">&pound;3.00</div>
   <div class="photosize">6 by 4 inch</div>
 </div>
 <div class="textrightwrapperphoto">
  <div class="photoaddbutton">Add</div>
  <div class="photoremovebutton">Delete</div>
 </div>
</div>

I want to put in some jquery so that when someone clicks on the 'photoaddbutton', it amends the class of 'photowrapperphoto' (to add a background color).

I can't seem to figure out how to identify the element photowrapperphoto.

I have loads of the above html (i.e. loads of images) on the page. I just want the immediately preceeding 'photowrapperphoto' to change, but at the moment the jquery I'm using changes all 'photowrapperphoto' classes on the page.

$(document).ready(function() {
 $('.photoaddbutton').click(function() {
  $('.photowrapperphoto').attr('class', 'photowrapperphotoselected');
 });
});

Any ideas?

I recommend getting familiar with jQuery's awesome DOM traversal methods. — tcovo
– tcovo, Commented Mar 30, 2013 at 0:21

tcovo · Accepted Answer · 2013-03-30 00:17:24Z

1

I'd recommend you let the photowrapperphoto items keep their photowrapperphoto class, and add an additional class selected, instead of changing the class.

The javascript to modify the correct photowrapperphoto could be:

$(document).ready(function() {
    $('.photoaddbutton').click(function() {
        $(this)
            .closest('.photowrapper')   // go up in the DOM until .photowrapper
            .children('.photowrapperphoto') // go down one level to .photowrapperphoto 
            .addClass('selected');
    });
});

To specify a special style for the selected photowrapperphoto, you can use a rule like this in your CSS:

.photowrapperphoto.selected
{
    background-color: red;
}

edited Mar 30, 2013 at 0:17

answered Mar 30, 2013 at 0:11

tcovo

7,7802 gold badges22 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Rogers Over a year ago

+1 My answer was nearly the same as yours, but I think you stated it better. I did spend some time on a nice jsFiddle though. Feel free to add it to your answer.

user2226032 Over a year ago

Thank you so much! Am fairly new to jquery so was having trouble navigating the DOM - really appreciated

Walter Tross · Accepted Answer · 2013-03-30 00:15:52Z

0

$(document).ready(function() {
   $('.photoaddbutton').click(function() {
      $(this).closest('.photowrapper').find('.photowrapperphoto').prop('class', 'photowrapperphotoselected');
   });
});

But I recommend adding and removing a class, not replacing one by the other. The first class marks the generic role of the element, the second one marks it's additional role when present.

edited Mar 30, 2013 at 0:15

answered Mar 30, 2013 at 0:09

Walter Tross

12.7k3 gold badges43 silver badges70 bronze badges

Collectives™ on Stack Overflow

Identify a specific class element within another div

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related