如果页面上有另一个元素，jQuery会向一个元素添加一个类答案

【问题标题】：jQuery add a class to an element if there is another element on the page如果页面上有另一个元素，jQuery会向一个元素添加一个类
【发布时间】：2016-07-28 16:57:28
【问题描述】：

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

所以我想隐藏#alert-feed，当其中没有<h5> 时添加一个类no-alert。我知道这可以通过使用hasClass 和addClass 来简单地完成，但是结构真的让我感到困惑，我对此无能为力。那么有人可以帮我弄清楚如何做到这一点吗？

【问题讨论】：

如何添加h5标签？

标签： javascript jquery html css

【解决方案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
}

【讨论】：

当#alert-feed 中没有h5 时，OP 想要添加类。我认为您当前的变体相反。应该是if (!feed.find('h5').length) { ... }
我刚刚意识到这一点，并且在您输入评论时正在编辑 :)

【解决方案2】：

如果你只是想根据h5的存在与否来隐藏#alert-feed，你可以试试这个代码：

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

否则如果需要类则：

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

【讨论】：

这只会找到id为alert-feed的元素的直接h5子元素？
@EdwardBlack 不，它可以找到h5 到#alert-feed 内的任何级别。对于直接h5，我们需要将其写为$('#alert-feed > h5')。

【解决方案3】：

你可以使用not()函数> .not()

参见下面的代码 sn-p。如果有帮助，请告诉我

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

【讨论】：

我们看不到发生了什么。添加一个触发您的代码的开始按钮，以便我们看到差异。
编辑了答案，以便更清楚。但这就像检查元素一样简单，您会看到我提供的代码是否有效