Question

I have items and buttons that are created dynamically and I want to show user what is happening by styling them with jquery (i am using AJAX). each item is like the following:

<li class="items">
<div class="itemheading">
<div class="controls"> 
    <span class="votes">1</span>
    <form class="actions" method="POST">
        <input type="submit" class="button plus" value="+1" data-plus="123">
    </form>
    <form class="actions" method="POST">
        <input type="submit" class="button minus" value="-1" data-minus="123">
    </form>  
    <form class="actions" method="POST">
        <input type="submit" class="button delete" value="X" data-del="123">
    </form></div><span class="title">Item title</span>
</div>
<span class="infotext">Item Description</span>
</li>

When a button is clicked I want the style of the item to be updated. for instance if the +1 button is clicked the items border should fade in green then fade back to nothing in the space of a few seconds to show that, that item has been voted up.

What I have thought of so far is the following:

$(".plus").live('click', function() {
 $(this).css("background", "#fff");

This does not work though. I thought I could use $(this) to reference the button that was clicked because I am using this already to get the data- tag value of the button:

var plus = $(this).data('plus');

The other problem is that even if it did work it would style the buttons border and I need to somehow style the <div class="itemheading">. I could just say style the .itemheading element but since I will have multiple items with that class I need to find another method. Perhaps there is a way to reference the parent of an element and then I could get the parent of that?

Thanks. Any help is really appreciated.

UPDATE: so people can see what worked heres the code.

$(".plus").live('click', function() {
 $(this).parents(".itemheading").css("background", "#000");
});​

Answer 1

Here is a working example, not sure if that is what you ment, but the parent element of class plus with class .itemheading will blink black after clicking +1 button.

Example – http://jsfiddle.net/yZmrz/