jQuery向頁面中添加一個類，如果頁面上有另一個元素

Question

我想在其中沒有<h5>時隱藏div容器。通常div容器將被隱藏。當服務器從其他網站提取Feed時，將在div容器內添加一個<h5>。然後div應該顯示在頁面上。

下面是HTML結構的簡化版本，沒有出<h5>

<div id="alert-feed"> 
    <div class="webpart-title">Title</div> 
    <div class="webpart-body"> 
     <div class="contianer"> 
      <ul class="feedlist"> 
       <li class="campusfeed"> 
        <ul class="articlelist"></ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

這裏是<h5>

<div id="alert-feed"> 
    <div class="webpart-title">Title</div> 
    <div class="webpart-body"> 
     <div class="contianer"> 
      <ul class="feedlist"> 
       <li class="campusfeed"> 
        <ul class="articlelist"> 
         <li> 
          <a><h5 class="articletitle"></h5></a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

所以，我想通過添加類no-alert隱藏#alert-feed的HTML時，有裏面沒有<h5>。我知道這可以簡單地通過使用hasClass和addClass，但結構真的讓我感到困惑，我對此無能爲力。那麼有人可以幫我弄清楚如何做到這一點？

Answer 1

試試這個 - 需要你試圖從其他網站

var feed = $('#alert-feed'); // get your feed 
if (!feed.find('h5').length) { // check if it doesn't contain a h5 
    feed.addClass('no-alert'); // if it doesn't, add a class 
} 

Answer 2

拉你的飼料如果你只是想根據有無h5裏面隱藏#alert-feed後運行，你可以試試這個代碼：

if(!$('#alert-feed h5').length) { 
    $('#alert-feed').hide(); 
} 

否則，如果需要的類，然後：

if(!$('#alert-feed h5').length) { 
    $('#alert-feed').addClass('no-alert'); 
} 

Answer 3

你可以使用not()功能>.not()

看到下面的代碼片段。讓我知道，如果它可以幫助

$(".articlelist").not(":has(h5)").addClass("no-alert");

.no-alert li { color:red;} 
 
.articlelist:not(.no-alert) { color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="alert-feed"> 
 
    <div class="webpart-title">Title</div> 
 
    <div class="webpart-body"> 
 
     <div class="contianer"> 
 
      <ul class="feedlist"> 
 
       <li class="campusfeed"> 
 
        <ul class="articlelist"> 
 
         <li> 
 
         <a><h5 class="articletitle">h5 is here !</h5></a> 
 
         </li> 
 
         
 
        </ul> 
 
        <ul class="articlelist"> 
 
         <li> 
 
         no h5 here ! 
 
         </li> 
 
         
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>