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());
});

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());
});

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 8, 2016 at 8:50 user3668438 asked Jan 8, 2016 at 8:49 user3668438user3668438 17555 silver badges2020 bronze badges 0

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

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./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>

Try this

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

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

});

You need :

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

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

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());
});

Try this:

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

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

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./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>