javascript - 如何获取最接近的div html内容？

Question

我有多个 ul 和 li，希望在单击 li 时获得最接近的 div 各自的 html 内容。

我试过这样的 $(this).closest('div').find('.email-con').show().html() 变得不确定。

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

我的脚本是:

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

Answer 1

如果你试图找到 .email-con 的内容，那么你需要遍历到 .subs-alrts 然后选择它的下一个元素。

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

查看最终代码:

$(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>