CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lucky13820
lucky13820

Reputation: 71

jQuery add a class to an element if there is another element on the page

I want to hide a div container when there is no <h5> in it. Normally the div container would be hide. When the server pulls feeds from other website, a <h5> will be add inside the div container. Then the div should show up on the page.

Here is a simplify version of the HTML structure without out <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>

Here is the HTML with <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>

So I want to hide the #alert-feed by adding a class no-alert when there is no <h5> inside it. I know this could be simply done by using hasClass and addClass, but the structure is really confusing me and I can't do anything about it. So could someone help me to figure out how to do this?

Upvotes: 2

Views: 91

Answers (3)

Mihai T
Mihai T

Reputation: 17687

you could use the not() function > .not()

see code snippet below. let me know if it helps

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

Upvotes: 0

Pete
Pete

Reputation: 58442

Try this - needs to be run after you have tried to pull your feeds from another website

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
}

Upvotes: 5

Mohammad Usman
Mohammad Usman

Reputation: 39322

If you just wants to hide #alert-feed based on presence or absence of h5 inside it, you can try this code:

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

Otherwise if class is needed then:

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

Upvotes: 0

Related Questions