jQueryページに別の要素がある場合、要素にクラスを追加します。

Question

<h5>がない場合、divコンテナを非表示にしたいと思います。通常、divコンテナは非表示になります。サーバーが他のWebサイトからフィードを取得すると、<h5>が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"></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> 

とHTMLであるだから私はno-alertたときにそこにクラスを追加することにより、#alert-feedを非表示にすることなく、HTMLの構造の簡素化バージョンです。その中には<h5>はありません。私はこれが単にhasClassとaddClassを使って行うことができることを知っていますが、構造は本当に混乱しており、私はそれについて何もできません。だから、誰かが私にこれをどうやってやるのを助けることができるだろうか？

Answer 1

これを試してみてください - あなたはちょうどそれの内側h5の有無に基づいて#alert-feedを非表示にしたい場合、あなたはこれを試すことができます別のウェブサイト

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

からフィードを引っ張ることを試みた後に実行する必要がありますコード：

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

そうでないクラスは、その後、必要な場合：

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

Answer 3

の場合は、not()関数>.not()

のコードスニペットをご覧ください。それはあなたが `h5`タグを追加するにはどうすればよい

$(".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>