我试图在没有孩子<li>
元素时隐藏主标题。我使用了此if
条件:
if($(".sportsUlLi").length){
但是,即使没有生成<li>
元素,也不会使用sports
类隐藏父 <div>
。
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>
您还可以使用ngIf
使用div
的非杰克风格,也可以使用hidden
属性,
<div class="panel panel-default sports headingBorderNone" *ngIf="sportsList.length > 0">
...
</div>
或
<div class="panel panel-default sports headingBorderNone" [hidden]="sportsList.length === 0">
...
</div>
$(".sportsUlLi").length
返回整数而不是bool。这样使用。
if($(".sportsUlLi").length == 0){
console.log("sports length--->" + $("sportsUlLi").length);
$(".sports").hide();
}