javascript - 仅当值大于 1 时显示 div Jquery

Question

如果变量 colorCount 中的值，我只想显示我的 div大于1。到目前为止我的代码没有隐藏基于此的div。我已经创建了代码 JSFIDDLE

$(document).ready(function() {

     $('.search').each(function(index, item) {
            var colorCount = $(item).find('.item-colours-result ul li').length;
            $(item).attr('data-search-position', colorCount);

            if (colorCount < 0 ) {

                $('.numberOfColours').hide();
            } else {
                $(this).find('.numberOfColours').html('<b>' + colorCount + '&nbsp;' + 'Colours available</b>').show();

            }
        });
    });

所以如果 <ul>没有 <li> div 不应显示。

我这样做正确吗？

Answer 1

1. colorCount 应为 < 1 或 <= 0
2. 隐藏是泛化的，需要具体到只隐藏目标div。

$(document).ready(function() {
    $('.search').each(function(index, item) {
        var colorCount = $(item).find('.item-colours-result ul li').length;
        $(item).attr('data-search-position', colorCount);

        if (colorCount < 1 ) {
            $(this).find('.numberOfColours').hide();
        } else {
            $(this).find('.numberOfColours').html('<b>' + colorCount + '&nbsp;' + 'Colours available</b>').show();

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result-item-1" class="search" data-search-position="1" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>



<div id="result-item-2" class="search" data-search-position="2" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>


<div id="result-item-3" class="search" data-search-position="3" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>


<div id="result-item-4" class="search" data-search-position="4" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""></ul>
</div>
<div class="numberOfColours">Test</div>
</div>