时间戳

首页 > 解决方案 > 其他类不存在时的Jquery addclass

javascript - 其他类不存在时的Jquery addclass

问题描述

我有以下 Div 结构。

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

如果 .product-layout 没有定义任何类，我想添加产品列表类。IE

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

或者

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

无需更改

如果<div class="product-layout"> 然后加载添加类

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

我在下面尝试但没有工作

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

标签： javascriptjquery

解决方案

尝试使用:not()选择器

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>

推荐阅读