Question

I have the html structure like this

      <div class="selected">
        <div class="selectedOption">September 2012</div>
     </div>
     <div class="optionsContainer" style="width: 138px;">
        <div class="option">July 2012</div>
        <div class="option">August 2012</div>
        <div class="option">September 2012</div>
        <div class="option">October 2012</div>
        <div class="option">November 2012</div>         
      </div>

I tried to apply the class ‘selected’ to the option which has the content equals to the ‘selectedOption’ div

jQuery('.optionsContainer .option').click(function(){ 

// call an one ajax too

jQuery.each(jQuery('.optionsContainer .option'),function(index,value){
        var temp = jQuery(this).html();
        var selected_date = jQuery(".selectedOption").html();
        if(temp == selected_date)
        {  alert('in');
            jQuery(this).addClass('selected');
        }   
    });
});

It is working fine but the problem is if i remove an alert means the class ‘selected’ is not applied. Any ideas? Thanks in advance

Answer 1

Base on my understanding: DEMO

$('.selectedOption').click(function(val){
   var soVal = $(this).text();
    $('.optionsContainer').toggle();

    $('.optionsContainer .option').each(function(){
        if($(this).text() == soVal){
            $(this).addClass('selected');
        }else if($(this).hasClass('selected')){
           $(this).removeClass('selected');
        }

    });

});

But i wonder if this is what you really want or the other way around.