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

查看最终代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你需要：

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

Answer 3

试试这个：

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

Answer 4

试试这个

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

使用以下内容更改jquery代码，它可能对您有帮助。

[UIView animateWithDuration:0.2 animations:^{
    self.splitViewController.preferredDisplayMode = UISplitViewControllerDisplayModePrimaryOverlay;
} completion:nil];

Answer 7

在代码注释中有两种解释方法：

注意：第二个（也是最简单的）要求您向顶部div添加一个类（因为col-md-12是一个可能在将来发生更改的引导程序）

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

如何获得最接近的div html内容？

7 个答案: