Question

我试图在没有子<li>元素时隐藏主标题。我使用了这个if条件：

if($(".sportsUlLi").length){

然而，即使没有生成<li>元素，它也不会将<div>隐藏在类sports中。

if ($(".sportsUlLi").length) {
  console.log("sports length--->" + $("sportsUlLi").length);
  $(".sports").hide();
}

<div class="panel panel-default sports headingBorderNone">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a href="javascript:;" class="panelPlanelTitle" aria-expanded="false">
        <i class="fa fa-caret-right  panelCaret"></i>
        sports
      </a>
    </h4>
  </div>
  <div id="sports" class="panel-collapse collapse panelPlanelData">
    <div class="panel-body">
      <ul class="sportsUl">
        <li class="sportsUlLi" *ngFor="let sportsVal of sportsList" (click)="Planels($event)" [attr.id]="sportsVal.id" >{{sportsVal.name}}</li>
        <!--<li  class="recentList" [routerLink]="['/UARsportsPlanel']"><span>UAR sports Planel</span></li> -->
      </ul>
    </div>
  </div>
</div>

Answer 1

您也可以使用div或使用ngIf属性来隐藏hidden的非jQuery样式，

<div class="panel panel-default sports headingBorderNone" *ngIf="sportsList.length > 0">
  ...
</div>

或

<div class="panel panel-default sports headingBorderNone" [hidden]="sportsList.length === 0">
  ...
</div>

Answer 2

$(".sportsUlLi").length返回整数而不是bool。像这样使用。

 if($(".sportsUlLi").length == 0){
        console.log("sports length--->" + $("sportsUlLi").length);
        $(".sports").hide();
}

隐藏没有李子的父元素

2 个答案: