jQuery selector trouble

Question

I have a bunch of smilies in a page, which on click has to be selected. I tried implementing a jquery based solution but am stuck at this stage, where multiple smilies are getting selected :

<div class="smiles_feed">
    <input type="text" id="rating" value="" name="rating" class="displaynone" />
    <div style="float:left;width:auto;text-align:Center;">
        <button type="button" class="awesomesmile" class="unselected" value="Awesome" style="margin-bottom:0px;"></button>
        <div class="smiletitle" style="font-size:9pt;color:white;">Yummy!</div>
    </div>
    <div style="float:left;width:auto;text-align:Center;">
        <button type="button" class="goodsmile" class="unselected" value="Good" style="margin-bottom:0px;"></button>
        <div class="smiletitle" style="font-size:9pt;color:white;">Good!</div>
    </div>
    <div style="float:left;width:auto;text-align:Center;">
        <button type="button" class="okaysmile" class="unselected" value="Okay" style="margin-bottom:0px;"></button>
        <div class="smiletitle" style="font-size:9pt;color:white;">Okay!</div>
    </div>
    <div style="float:left;width:auto;text-align:Center;">
        <button type="button" class="yucksmile" class="unselected" value="Yuck" style="margin-bottom:0px;"></button>
        <div class="smiletitle" style="font-size:9pt;color:white;">Yuck!</div>
    </div>
</div>

<script type='text/javascript'>
    $(function(){
        // Smile Click Function
        $('div.smiles_feed :button').click(function(){
            $(this).removeClass('unselected').addClass('selected');
            $(this).siblings().removeClass('selected').addClass('unselected');
            $('#rating').val($(this).val());
            //alert($('#rating').val());
        });
    });
</script>

What am I doing wrong? How do I change the javascript function to make it select only one smiley?

Answer 1

1. $(this) inside your click() function refers to the button that was clicked, not the div that was clicked. You need to add the selected class to $(this).parent().
2. The elements returned by siblings() are not the divs that represent other smileys, but rather are other elements of this smiley (in this case, div.smiletitle).

To get a list of the other smileys, you should be looking at $(this).parent().siblings().

If your button is what represents the smiley, then you should be traversing other smileys like this:

$(this).parent().siblings().children('button')

and making them each get deselected:

$(this).parent().siblings().children('button').each(function(){
    $(this).removeClass('selected')
    .addClass('deselected');
});