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

Question

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?

How do you add h5 tag?

niyasc
– niyasc

2016-07-28 07:56:07 +00:00
Commented Jul 28, 2016 at 7:56 — niyasc
– niyasc, Commented Jul 28, 2016 at 7:56

Pete · Accepted Answer · 2016-07-28 08:22:00Z

5

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
}

edited Jul 28, 2016 at 8:22

answered Jul 28, 2016 at 7:56

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Usman Over a year ago

OP wants to add class when there is no h5 inside #alert-feed. I think your current variant doing opposite. It should be if (!feed.find('h5').length) { ... }

Pete Over a year ago

I just realised that and was editing as you typed your comment :)

Mohammad Usman · Accepted Answer · 2016-07-28 08:17:25Z

0

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');
}

edited Jul 28, 2016 at 8:17

answered Jul 28, 2016 at 8:03

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

2 Comments

Black Over a year ago

this will only find the direct h5 child of the element with id alert-feed?

Mohammad Usman Over a year ago

@EdwardBlack No, it can find h5 to any level inside #alert-feed. For direct h5 we need to write it as $('#alert-feed > h5').

Mihai T · Accepted Answer · 2016-07-28 08:57:28Z

0

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>

edited Jul 28, 2016 at 8:57

answered Jul 28, 2016 at 8:04

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

2 Comments

Black Over a year ago

We dont see whats even happening. Add a start button which triggers your code, so we can see the difference.

Mihai T Over a year ago

edited the answer so as it's more clear. but it was as easy as inspecting the element and you would've seen if the code provided by me worked or not

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related