How do <i> get to the diva with the class faq-popup by clicking on the <i> element?

 $('.btn-add-button').on('click', 'i', function(event) { var target = event.target; $(target).toggleClass('material-icons-remove'); $(target).toggleClass('material-icons-add'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <div class="faq-wrap"> <h3>Tempor Insididunt</h3> <div class="faq-popup hidePopup"> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum.</p> </div> <div class="btn-add-button"> <i class="material-icons-add"></i> </div> </div> </div> <div class="col-md-4"> <h3>Tempor Insididunt</h3> <div class="faq-popup hidePopup"> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum.</p> </div> <div class="btn-add-button"> <i class="material-icons-add"></i> </div> </div> <div class="col-md-4"> <h3>Tempor Insididunt</h3> <div class="faq-popup hidePopup"> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum.</p> </div> <div class="btn-add-button"> <i class="material-icons-add"></i> </div> </div> </div>

    3 answers 3

    You can reach this way:

     $('i').click(function() { var element = $(this).parent().parent().find('.faq-popup'); });

    or so:

     $('i').click(function() { var element = $(this).parent().prev('.faq-popup'); });

    As one of the participants correctly noted in the answer, this is a rather bad method, since when changing the structure, you will have to rewrite the access code to the element. I would advise you, after <div class="col-md-4"> to do another container class.

     <div class="col-md-4"> <div class="container-item"> <h3>Tempor Insididunt</h3> <div class="faq-popup hidePopup"> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum.</p> </div> <div class="btn-add-button"> <i class="material-icons-add"></i> </div> </div> </div>

    And the search in this case is as follows:

     $('i').click(function() { var element = $(this).closest('.container-item').find('.faq-popup'); });
    • Thank you very much available !! - climberDen
    • @climberDen If any of the answers have helped you, you can mark it as “accepted” by checking the green checkbox under the voting buttons to the left of the answer. - user218976
     $('.btn-add-button').on('click','i',function(event) { $(event.currentTarget).closest('.col-md-4').find('faq-popup').hide(); });

    This is not a good option, because it is tied to a class that defines the display of content, and if someone decides to change the number of columns, the code will break. In the simplest case, you can add some wrapper that will combine the elements.

       $('i').on('click', function() { $(this).closest('.col-md-4').find('.faq-popup').hide(); });

      In this example, I hide .faq-popup , and you already add what functionality you need.

      The closest method will find the nearest parent with the class .col-md-4 . Then by the find method in it we are looking for .faq-popup .