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

Question

我想在其中沒有<h5>時隱藏div容器。 通常div容器將被隱藏。 當服務器從其他網站提取提要時， <h5>將添加到div容器中。 然后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>的HTML

<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>

所以我想通過在其中沒有<h5>時添加一個no-alert類來隱藏#alert-feed 。 我知道可以通過使用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>