Question

我希望在没有<h5>的情况下隐藏div容器。通常div容器是隐藏的。当服务器从其他网站提取订阅源时，将在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>

的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时添加一个类no-alert来隐藏<h5>。我知道这可以通过使用hasClass和addClass来完成，但结构真的令我感到困惑，我无法做任何事情。那么有人可以帮我弄清楚如何做到这一点？

Answer 1

尝试此操作 - 需要在尝试从其他网站提取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

如果您只是想根据#alert-feed中是否存在h5隐藏if(!$('#alert-feed h5').length) { $('#alert-feed').hide(); }，可以尝试以下代码：

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

否则，如果需要课程，则：

C:/Users/maniceto/Documents/workspace/.metadata/.plugins/org.eclipse.wst.server.core/

Answer 3

您可以使用$( ".articlelist" ).not( ":has(h5)" ).addClass( "no-alert" );功能＆gt; .not()

请参阅下面的代码段。让我知道它是否有帮助

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

{{1}}

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

3 个答案: