Question

仅当变量colorCount中的值大于1时才显示div。到目前为止，我的代码还没有基于此隐藏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

colorCount应为<1或<= 0
隐藏是通用的，只需要隐藏目标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>

仅当值大于1时才显示div

1 个答案: