CODEWITHSUNDEEP
javascriptjquery
Deepak Lamppost
Deepak Lamppost

Reputation: 13

Jquery addclass when other classes not present

I have following Div structure.

<div class="product-layout">
    <div class="product-item-container">
        <div class="left-block">
            <div class="product-image-container">TitleGoesHere</div>
        </div>
        <div class="right-block">
            
            <div class="description">
                <p>ContentGoesHere </p>
            </div>
        </div>
        <div class="list-block"><button class="addToCart btn-button" type="button" title="Add to cart" onclick="cart.add('55', '1');"><i class="fa fa-shopping-basket"></i></button><button class="wishlist btn-button" type="button" title="wishlist" onclick="wishlist.add('55');"><i class="fa fa-heart"></i></button></div>
    </div>
</div>
<div class="product-layout product-grid">
    <div class="product-item-container">
        <div class="left-block">
            <div class="product-image-container">TitleGoesHere</div>
        </div>
        <div class="right-block">
            
            <div class="description">
                <p>ContentGoesHere </p>
            </div>
        </div>
        <div class="list-block"><button class="addToCart btn-button" type="button" title="Add to cart" onclick="cart.add('55', '1');"><i class="fa fa-shopping-basket"></i></button><button class="wishlist btn-button" type="button" title="wishlist" onclick="wishlist.add('55');"><i class="fa fa-heart"></i></button></div>
    </div>
</div>

I want to add product-list class if .product-layout has not got any classes defined. i.e

<div class="product-layout product-list">

OR

<div class="product-layout product-grid">

NO CHANGES REQUIRED

IF <div class="product-layout"> THEN ON LOAD ADD CLASS

<div class="product-layout product-list">

I tried below but not working

 if(!$(".product-layout").hasClass("product-list") || !$(".product-layout").hasClass("product-grid")){
    $(".product-layout").addClass("product-list");
 }

Upvotes: 1

Views: 34

Answers (1)

User863
User863

Reputation: 20039

Try using :not() selector

https://api.jquery.com/not-selector/

$('.product-layout:not(.product-list, .product-grid)').addClass('product-list')
.product-list { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product-layout">a</div>
<div class="product-layout product-grid">b</div>

Upvotes: 2

Related Questions