$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>javascript - How to get closest div html content? - Stack Overflow|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - How to get closest div html content? - Stack Overflow

    javascript - How to get closest div html content? - Stack Overflow

    matteradmin13PV0评论

    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 edited Jan 8, 2016 at 8:50 user3668438 asked Jan 8, 2016 at 8:49 user3668438user3668438 1755 silver badges20 bronze badges 0
    Add a ment  | 

    7 Answers 7

    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>

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far