Question

我有结构

<div id="id">
    <ul>
        <li class="li-1">
            <div style="height: 0px;">
                <div>
                    <div class="col-1">
                        <div class="component"></div>
                    </div>
                    <div class="col-2">
                        <ul>
                            <li><a href="#About2008"><span class="icon-picture">2008</span></a></li>
                            <li><a href="#About2009"><span class="icon-headphones">2009</span></a></li>
                            <li><a href="#About2010"><span class="icon-home">2010</span></a></li>
                            <li><a href="#About2011"><span class="icon-facetime-video">2011</span></a></li>    
                            <li><a href="#About2012"><span class="icon-envelope-alt">2015</span></a></li>
                        </ul>
                    </div>
                    <div class="col-3"></div>
                </div>
            </div>
        </li>
    </ul>
</div>

$('#id').on('mouseenter', '> ul > li', function() {
    var li = $(this)
})

现在我想提醒.col-2身高。我这样做：

$('#id').on('mouseenter', '> ul > li', function() {
    var li = $(this)
    alert(li.children(".col-2").height());
})

但我总是得到null？我怎样才能获得正确的价值？

Answer 1

带过滤器的儿童只会让您直接接触直接儿童。使用find

 $('#id')
    .on('mouseenter','>ul>li',function(){
        var li=$(this);
        alert(li.find( ".col-2" ).height());
    })

LIVE http://jsfiddle.net/mailmerohit5/pn80krf9/

Answer 2

假设find内只有一个children，使用col-2调用代替li可以更好地实现此目的。请参阅工作代码段

＆＃13;

$('#id')
  .on('mouseenter', '>ul>li', function() {
    var li = $(this).closest('li')
    alert(li.find(".col-2").height() + "px");
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
  <ul>
    <li class="li-1">
      <div style="height: 45px;">
        <div>
          <div class="col-1">
            <div class="component">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a risus id magna aliquet facilisis in ut dolor. Praesent non ipsum pulvinar, interdum urna in, facilisis risus.
            </div>
          </div>
          <div class="col-2">
            Donec sollicitudin nibh vitae tellus dapibus iaculis. Duis nec sem enim. Nullam tincidunt ex a lacinia egestas. Maecenas pulvinar tempor neque at posuere.
          </div>
          <div class="col-3">
            Vestibulum eu imperdiet nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis posuere lacus augue, ut aliquet elit fermentum faucibus. Cras commodo dolor sit amet dictum fermentum.
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

获取mouseenter <li> children <div> height

2 个答案: