隐藏没有 li 子元素的父元素答案

【问题标题】：Hiding parent elements with no li children隐藏没有 li 子元素的父元素
【发布时间】：2017-12-22 12:50:47
【问题描述】：

当没有子 <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>

【问题讨论】：

$(".sportsUlLi").length == 0?
你试过if($(".sportsUlLi").length<1){
嘿，但还是不行

标签： javascript jquery html css angular

【解决方案1】：

您还可以使用ngIf 或使用hidden 属性来使用div 的非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>

【讨论】：

谢谢它的工作......我是 angular 2 的新手......你能告诉我sportsList 是什么意思......如果你解释它会很棒，以便将来我可以通过我自己
sportsList 是一个“数组”对象，在您的“组件”文件中定义为this.sportsList = <some-kind-of-an-array>;

【解决方案2】：

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

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

【讨论】：