Call filter() after find() jQuery

Question

I'm trying to detect wether there is .product which css is display: block; (visible) in .calendar-paper or not.

var $objArr = $('.calendar-paper');
$objArr.each(function(i) {
    var $thisCalendar = $objArr.eq(i);
    if(!$thisCalendar.find('.product').filter(':visible')) {
        // Do something if the content of .calnedar-paper is empty 
    } else {
       
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="calendar-paper">
    <div class="product" style="display: block;">...</div>
    <div class="product" style="display: none;">...</div>
</div>

<div class="calendar-paper">
    <div class="product" style="display: block;">...</div>
</div>

And the result shows that even if the .product css display: none, still run the else condition. That's not what I expect. Please explain to me where the logic goes wrong. Thank you.

"And I can't get the result that I want" — What result *do* you want? — Quentin, Aug 15 '20 at 11:06
[`filter`](https://api.jquery.com/filter/) returns a jQuery object which is always truthy. — str, Aug 15 '20 at 11:08
@Quentin Sorry. I just edited my question. Please read it again and please give me a hand. Thank you. — hayley, Aug 15 '20 at 11:30

Bhojendra Rauniyar · Accepted Answer · 2020-08-15T11:12:47.810

1

You're missing to find it's length:

if($thisCalendar.find('.product').filter(':visible').length) {

But I suspect that you wanted to use :empty selector instead of :visible selector.

if($thisCalendar.find('.product:empty').length) {

edited Aug 15 '20 at 11:12

answered Aug 15 '20 at 11:07

Bhojendra Rauniyar

83,432
35
168
231

This is because just like @str said `filter()` always returns a jQuery object and I will always get true in the if-else condition. So I need to test the length of the object right? – hayley Aug 15 '20 at 11:37

Call filter() after find() jQuery

1 Answers1