How to get closest div html content?

Question

I have multiple ul and li's and want to get the closest div respective html content when click on li.

I have tried this like $(this).closest('div').find('.email-con').show().html() getting undefined.

<div class="col-md-12">
    <div class="col-md-3 subs-alrts">
        <ul class="cp-expand sent-mails" id="sent-mails">
            <li class="clearfix">
                <div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
                <div class="cp-exp-con col-md-12">
                   <ul> 
                        <li class="evnt-mail-cls" >06/01/16</li>
                   </ul>
              </div>
            </li>
        </ul>
    </div>
    <div class="col-md-9 email-con" id="email-con" style="display:none">
    dasara mail content
    </div>
</div>

My script is:

$('#sent-mails .cp-exp-con ul li').click( function(){
        alert($(this).closest('div').find('.email-con').show().html());
});

Answer 1

If you are trying to find the content of .email-con then you need to traverse upto .subs-alrts and then pick its next element.

$('#sent-mails .cp-exp-con ul li').click( function(){
        alert($(this).closest('.subs-alrts').next('.email-con').show().html());
});

See the final code:

 $(function() { $('#sent-mails .cp-exp-con ul li').click(function() { var x = $(this).closest('.subs-alrts').next('.email-con'); x.show(); alert(x.html()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12"> <div class="col-md-3 subs-alrts"> <ul class="cp-expand sent-mails" id="sent-mails"> <li class="clearfix"> <div class="cp-exp-title clearfix col-md-12">Dasara Mail</div> <div class="cp-exp-con col-md-12"> <ul> <li class="evnt-mail-cls">06/01/16</li> </ul> </div> </li> </ul> </div> <div class="col-md-9 email-con" id="email-con" style="display:none"> dasara mail content </div> </div> 

Answer 2

You need :

$('#sent-mails .cp-exp-con ul li').click( function(){
    alert($(this).closest('div').parent().find('.email-con').show().html());
});

Answer 3

Try this:

$('#sent-mails .cp-exp-con ul li').click( function(){
    alert($(this).parents('.subs-alrts').parent().find('.email-con').show().html());
});

Answer 4

Try this

$('ul li').click(function(){

  var a=$(this).closest('div');
  a=$(this).closest('div').text();
  alert(a);

});

Answer 5

 $('#sent-mails .cp-exp-con ul li').click( function(){ alert($('.email-con').show().html()); }); 

Answer 6

Change for jquery code with following , it may help you.

$('#sent-mails .cp-exp-con ul li').click( function(){
    alert($(this).parents('.subs-alrts').parent('div').find('.email-con').show().html());
});

Answer 7

You have two way of doing this explained in code comments :

Note : the second (and easiest) require that you add a class to your top div (because col-md-12 is a bootstrap one that could change in the future)

 // if you click there will be 2 alerts because I wrote two way of doing it : $('#sent-mails .cp-exp-con ul li').click( function() { var html = $(this) // Get the parent with class "subs-alrts" .parents(".subs-alrts") // get the following element that have the class "email-con" .next('.email-con') .show().html(); alert(html); }); // OR $('#sent-mails .cp-exp-con ul li').click( function() { var html = $(this) // Get the parent with class "MAIN_DIV" .parents(".MAIN_DIV") // find the child element that have the class "email-con" .find('.email-con') .show().html(); alert(html); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 MAIN_DIV"> <div class="col-md-3 subs-alrts"> <ul class="cp-expand sent-mails" id="sent-mails"> <li class="clearfix"> <div class="cp-exp-title clearfix col-md-12">Dasara Mail</div> <div class="cp-exp-con col-md-12"> <ul> <li class="evnt-mail-cls" >06/01/16</li> </ul> </div> </li> </ul> </div> <div class="col-md-9 email-con" id="email-con" style="display:none"> dasara mail content </div> </div>