Question

这是我的JQuery：

$(window).load(function(){
  $(".mobile-handle").css({height: $("ul#active-tasks li").height()});
})

这是我的观看代码：

%li.task.clearfix[task]
  .mobile-handle

我正在尝试将.mobile-handle的高度设置为父li的高度。还在学习JS / Jquery，对不起，我知道这是基本的。

Answer 1

这会将每个.mobile-handle的高度设置为其祖先的高度li

$(window).load(function(){
    $(".mobile-handle").each(function(){
        $(this).css({height: $(this).closest('li').height()});
    });
})

Answer 2

看看closest。

"Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree."

reference

$(window).load(function(){
    $(".mobile-handle").css({
        'height': $("ul#active-tasks").closest('li').height()
    });
});

Answer 3

也许使用：parent选择器可以。

$(window).load(function(){
    $(".mobile-handle").css({height: $(".mobile-handle:parent").height()});
})

Answer 4

尝试：

$(".mobile-handle").height( $("#active-tasks li").height() );

或

$(".mobile-handle").height( $(".mobile-handle").parent('li').height() );

Answer 5

这里我已经为上面的查询做过箱子，你也可以找到演示链接。

演示： http://codebins.com/bin/4ldqp9d

<强> HTML：

<ul id="active-tasks">
  <li>
    <div class="mobile-handle">
      Mobile-1
    </div>
  </li>
  <li>
    <div class="mobile-handle">
      Mobile-2
    </div>
  </li>
  <li>
    <div class="mobile-handle">
      Mobile-3
    </div>
  </li>
  <li>
    <div class="mobile-handle">
      Mobile-4
    </div>
  </li>
</ul>

<强> CSS：

#active-tasks{
  padding:4px;
  border:1px solid #445599;
  list-style:none;
  width:50%;
  background:#f9c8c5;
}
#active-tasks li{
  height:30px;
}

<强> JQuery的：

$(function() {

    $(".mobile-handle").height($(".mobile-handle").parent('li').height());
    /*
    //Another Alternate way is:
    $(".mobile-handle").height( $(".mobile-handle").closest('li').height() );*/

});

演示： http://codebins.com/bin/4ldqp9d

如何获得最接近的<li>设置.css高度</li>

5 个答案: