javascript - Jquery - 使用过滤功能对元素进行计数并显示

Question

我有 1-n <div class="project">可以使用 .collapse 打开各自表格的元素类(class)。我过滤每个表格中的文本内容以隐藏或显示其内容。现在我计算每个表的匹配元素的数量。我想显示每个 <span> 中计数器的值<div>的元素。有人可能知道我该怎么做？

我的 HTML:

<div class="project">
    <div class="project-Content">
        <div style="margin-top:10px; margin-bottom:10px; margin-left:10px">
            <a data-toggle="collapse" data-target="#vw" style="cursor:pointer;">
               <!--I WANT TO DISPLAY IT IN THE () of the span-->
               <b>Volkswagen <span>()</span></b>
            </a>
        </div>
    </div>
    <div class="collapse" id="vw">
        <table class="table table-striped table-hover">
            <tr class="carsName">
                <td>Golf</td>
            </tr>
            <tr class="carsName">
                <td>Polo</td>
            </tr>
            <tr class="carsName">
                <td>Passat</td>
            </tr>
        </table>
    </div>
</div>

<!-- ...SOME MORE OF <div class="Project">... -->

<input type="text" class="form-control filter" id="testFilter" name="testFilter" placeholder="Search"/>

我的 JQuery:

//Filter and Count matching elements
$('#testFilter').keyup(function () {
    var filter_array = new Array();
    var filter = this.value.toLowerCase();  // no need to call jQuery here
    filter_array = filter.split(' '); // split the user input at the spaces
    var arrayLength = filter_array.length; // Get the length of the filter array

    $('.collapse, .in').each(function() {
        // counter for visible tr-elements
        var nrOfVisibleCars = 0;

        $(this).find("tr").each(function() {

            var _this = $(this);
            var car = _this.find('td').text().toLowerCase();
            var hidden = 0; // Set a flag to see if a tr was hidden

            // Loop through all the words in the array and hide the tr if found
            for (var i=0; i<arrayLength; i++) {
                if (car.indexOf(filter_array[i]) < 0) {
                    _this.hide();
                    hidden = 1;
                }
            }
            // If the flag hasn't been tripped show the tr
            if (hidden == 0)  {
                _this.show();
                //count all visible tr-elements
                nrOfVisibleCars++;
            }
        });
        // Show for every closed Collapse (.collapse) or open Collapse (.in) the counter
        alert(nrOfVisibleCars);

        // HERE I NEED SOME NEW CODE TO SHOW 'nrOfVisibleCars'
        // IN <span>()</span> OF EVERY RESPECTIVE <div>
    });
});

预先感谢您的帮助。

Answer 1

请尝试一下

//Filter and Count matching elements
$('#testFilter').keyup(function () {
    var filter_array = new Array();
    var filter = this.value.toLowerCase();  // no need to call jQuery here
    filter_array = filter.split(' '); // split the user input at the spaces
    var arrayLength = filter_array.length; // Get the length of the filter array

    $('.collapse, .in').each(function() {
        // counter for visible tr-elements
        var nrOfVisibleCars = 0;
        var $parent = $(this).parent();

        $(this).find("tr").each(function() {

            var _this = $(this);
            var car = _this.find('td').text().toLowerCase();
            var hidden = 0; // Set a flag to see if a tr was hidden

            // Loop through all the words in the array and hide the tr if found
            for (var i=0; i<arrayLength; i++) {
                if (car.indexOf(filter_array[i]) < 0) {
                    _this.hide();
                    hidden = 1;
                }
            }
            // If the flag hasn't been tripped show the tr
            if ($(this).is(':hidden'))  {

                //count all visible tr-elements
                nrOfVisibleCars++;
            }
        });

        // HERE I NEED SOME NEW CODE TO SHOW 'nrOfVisibleCars'
        $parent.find('span').html($('tr').length - nrOfVisibleCars);
    });
});

DEMO