Jquery select parent class div

Question

I'm trying to write some simple jQuery to display class bl3 when class blc3 is clicked. I've got it working to show every class bl3 when a blc3 class is clicked, but I want it to open only the specific bl3 that relates to the clicked blc3.

HTML :


    
    
        
            Ships to:
            Days:
            UK
            7
            Buy now
            Add
        
    
    TESTING
    
        
             '.$product["price"].'
                

            
             '.$product["stime"].'
                

            
             '.$product["sto"].'
                

            
             '.$product["sto"].'

JQUERY :

$j(".blc3").click(function() {
    $j(this).parent().prev('.bl3').css('display','block');  
});

Unfortunately, this does not select the correct element.

The jQuery below works for displaying all elements with class bl3:

$j('.bl3').css('display','block');

But I want to display only the one that relates to the clicked blc3.
How to just display the one appropriate bl3?

showdev · Accepted Answer

I suggest the jQuery selector below. For each .blc3 that is clicked, it looks for the parent div.product and then searches for a .bl3 in that element.

$('.blc3').on('click',function(){
    $(this).closest('div.product').find('.bl3').show();
});

Documentation: closest(), find()

Test below:

$('.blc3').on('click', function() {
  $(this).closest('div.product').find('.bl3').show();
});



  
  
    
      Ships to:
      Days:
      UK
      7
      Buy now
      Add
    
  
  TESTING
  
    
       '.$product["price"].'
        

      
       '.$product["stime"].'
        

      
       '.$product["sto"].'
        

      
       '.$product["sto"].'
        

      
    
  



  
  
    
      Ships to:
      Days:
      UK
      7
      Buy now
      Add
    
  
  TESTING
  
    
       '.$product["price"].'
        

      
       '.$product["stime"].'
        

      
       '.$product["sto"].'
        

      
       '.$product["sto"].'

Jquery select parent class div

Answers (1)

Related Questions