Question

HTML：

   <div class="col-16-6">      
          <div class="product-image">
            <img src="//image.com/{{ImagePath}}" />
          </div>
    </div>

我想如果我的HTML结构有.product-image类，请提醒您。

我的JS：

 maxWidth: function () {
        if ($('.product-detail-lightbox').find('.product-image').length) {
            alert("image ok");
        } else {
            alert("image none");
        }
    },

但它不起作用。检查了devtools但没有任何错误。

谢谢。

Answer 1

如果你有几个带有“product-detail-lightbox”类的元素，那么$（'。product-detail-lightbox'）将返回一个对象数组;这就是为什么它不起作用。

为了让它工作，你需要遍历这个数组并测试每个对象是否包含所需的元素：

function maxWidth () {
        $('.product-detail-lightbox').each(function(){
            if ($(this).find('.product-image').length) {
                alert("image ok");
            } else {
                alert("image none");
            }
        });
    }

Answer 2

$('.product-detail-lightbox').find('.product-image')会找到＆＃34; product-image＆＃34;这些是具有类＆＃34; product-detail-lightbox＆＃34;的元素的子元素。您的html模板没有带有类＆＃34; product-detail-lightbox＆＃34;的元素。因此，你永远不会得到警告，因为＆＃34;图像确定＆＃34;。您可以将.product-image元素包装在另一个div元素中，如下所示。

<div class="col-16-6">      
    <div class="product-detail-lightbox">
        <div class="product-image">
            <img src="//image.com/{{ImagePath}}" />
        </div>
    </div>
</div>

你的JS如下。

maxWidth: function () {
    if ($('.product-detail-lightbox').find('.product-image').length) {
        alert("image ok");
    } else {
        alert("image none");
    }
},

这是小提琴。 http://jsfiddle.net/mrk_m/g60sesrd/3/

Answer 3

This fiddle可能会回答您的问题。

$(document).find('div.product-image').length

通过jQuery if语句检查HTML中的类

3 个答案: