Add a class to a specific element and not to all that have the same class

Question

My problem must be very simple to solve for many of you but I have no idea how to specify the element, here's what's going on.

I have a list of products with their images and an Add To Cart button for each product. I want to add a class to the product's container when its specific Add To Cart button has been clicked.

So far I'm able to do it but all products' containers get the class added.

Here's my basic HTML:

<div class="prod-img"><a href="#"><img src="images/product-1.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

<div class="prod-img"><a href="#"><img src="images/product-2.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

<div class="prod-img"><a href="#"><img src="images/product-3.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

My jQuery:

$('.add').click(function(){
  $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
  $('.prod-img').addClass('prod-added');
return false;
});

Just FYI, once the Add To Cart button is clicked it gets replaced with an "Item Added to Cart" image.

How can I make the specific product's container get a class ('prod-added') to it without adding it to the rest of the products?

Thanks for any help on this.

--

EDIT

I apologize, I did not expect the solution to be based on actually selecting exactly the previous element. I do have two more elements in between the product and the Add to Cart button. Code has been updated. Thanks for your help.

Answer 1

Thanks to Loktar and JacobM.

The solution to this is:

HTML:

<ol class="search-results">
  <li>
    <div class="prod-img"><a href="#"><img src="images/product-1.jpg" alt=""></a></div>
    <div class="product-info"><span class="price">$40.00</span>
      <p class="description">Lorem ipsum dolor...</p>
      <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a> </div>
  </li>
  <li>
    <div class="prod-img"><a href="#"><img src="images/product-2.jpg" alt=""></a></div>
    <div class="product-info"><span class="price">$40.00</span>
      <p class="description">Lorem ipsum dolor...</p>
      <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a> </div>
  </li>
  <li>
    <div class="prod-img"><a href="#"><img src="images/product-3.jpg" alt=""></a></div>
    <div class="product-info"><span class="price">$40.00</span>
      <p class="description">Lorem ipsum dolor...</p>
      <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a> </div>
  </li>
</ol>

jQuery:

$('.add').click(function(){
    $(this).parents("ol.search-results li").find('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');          
return false;
});

So when you click the 'Add to Cart' button, not only the button gets replaced with an 'Item Added to Cart' image, but the image of the product gets a class added to it that you can then style in your CSS to improve usability of the Add to Cart feature.

Answer 2

After your edit, it looks like you want the matching div that is right before the parent of this:

$('.add').click(function(){

    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
    $(this).parent().prev('.prod-img').addClass('prod-added');
    return false;
});

More generally, you want a way to link the clicked link to the target div. The above approach is somewhat fragile, as it is dependent on your HTML being arranged in just the right way. A better approach might be to put each set of elements into a container, and reference them that way:

<div class="product-display"> 
   <div class="prod-img"><a href="#"><img src="images/product-1.jpg" alt=""></a></div>
   <div class="product-info"><span class="price">$40.00</span>
     <p class="description">Lorem ipsum dolor...</p>
     <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
   </div>
</div>

<div class="product-display">     
   <div class="prod-img"><a href="#"><img src="images/product-2.jpg" alt=""></a></div>
   <div class="product-info"><span class="price">$40.00</span>
     <p class="description">Lorem ipsum dolor...</p>
     <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
   </div>
</div>

Then the key line in your jquery becomes

 $(this).parents(".product-display").find('.prod-img').addClass('prod-added');

Now it doesn't matter if you change the order of elements within a "product-display" group, or add new items in between them, or anything like that.

Answer 3

For it to work you will have to do this

$('.add').click(function(){
     $(this).parent('div').prev('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');

    return false;
});

Almost the same as JacobM, but since you are replacing the element in the dom you have to apply the class before that.

http://jsfiddle.net/loktar/eTWkA/1/

Answer 4

I believe the best way to do that is specify an id to each element and do that:

$('.add').click(function(){
    var id = $(this).attr('id');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
    $('#' + id).addClass('prod-added');
    return false;
});