如何通过$.each限制实时搜索JSON数据的表格显示行数？

我来帮你搞定这个问题！你现在的核心问题是**count变量的作用域不对**——你把它放在$.each的循环体内部了，导致每次遍历数据项时，count都会被重置为0，根本没法正确统计已经添加了多少行，自然达不到限制10行的效果。

问题分析 #

你原代码里的var count = 0;写在$.each的每一次循环里，意味着每处理一个数据项，count都会回到0。哪怕已经添加了10行，下一次循环count还是0，count <10的条件永远成立，直到遇到不匹配搜索条件的项才会触发return false，这完全不符合你的预期。

正确的实现方式 #

把count变量移到$.each循环外面，让它在整个遍历过程中保持计数。当添加的行数达到10时，直接终止循环即可。

修改后的完整代码如下：

$(document).ready(function() { 
    $.ajaxSetup({ cache: true }); 
    $('#search').keyup(function() { 
        $('#result').html(''); 
        $('#state').val(''); 
        var searchField = $('#search').val(); 
        var expression = new RegExp(searchField, "i"); 
        $.getJSON('https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI', function(data) { 
            // 把count移到each外面，保证计数持续有效
            var count = 0; 
            $.each(data, function(key, value) { 
                // 先判断是否匹配搜索条件，再判断行数是否小于10
                if ((value.city.search(expression) != -1 || value.branch.search(expression) != -1)) {
                    if(count < 10){
                        $('#result').append('<tr><th>' + value.bank_name + '</th>' + '<th>' + value.address + '</th>' + '<th>' + value.ifsc + '</th>' + '<th>' + value.branch + '</th>' + '<th>' + value.bank_id + '</th></tr>'); 
                        count++; 
                    } else {
                        // 行数达到10，终止整个each循环
                        return false;
                    }
                }
            }); 
        }); 
    }); 
});

更优雅的优化方案 #

你还可以先过滤出所有符合搜索条件的数据，再直接取前10条进行渲染，逻辑会更清晰，也避免了在遍历过程中频繁判断行数：

$(document).ready(function() { 
    $.ajaxSetup({ cache: true }); 
    $('#search').keyup(function() { 
        $('#result').html(''); 
        $('#state').val(''); 
        var searchField = $('#search').val(); 
        var expression = new RegExp(searchField, "i"); 
        $.getJSON('https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI', function(data) { 
            // 先过滤匹配项，再取前10条
            var matchedItems = data.filter(function(value){
                return value.city.search(expression) != -1 || value.branch.search(expression) != -1;
            }).slice(0,10);
            
            // 遍历前10条匹配项渲染
            $.each(matchedItems, function(key, value) { 
                $('#result').append('<tr><th>' + value.bank_name + '</th>' + '<th>' + value.address + '</th>' + '<th>' + value.ifsc + '</th>' + '<th>' + value.branch + '</th>' + '<th>' + value.bank_id + '</th></tr>'); 
            }); 
        }); 
    }); 
});

这种方式先筛选再截取，代码可读性更强，也减少了循环内的条件判断，推荐使用~

内容的提问来源于stack exchange，提问作者sharad