jQuery：如何計數部分中的所有行並顯示計數

Question

我正在使用允許用戶在表行中搜索字符串的搜索。 如果該行不包含該字符串，則將其隱藏。

但是，我正在使用Bootstrap的可折疊Accordian： http : //getbootstrap.com/javascript/#collapse-example-accordion

我希望能夠計算出每個組的標題中顯示了多少行。 但是我的總數似乎是串聯的。 您可以看到某些部分具有多個表，因此我僅對行進行計數。

我是Jquery的新手。 我尚不知道它的全部功能，因此感謝您的幫助。

我的代碼：

 /* 1. Get users search string & Display only rows that match 2. Display how many results are in each */ $( document ).ready(function() { // on search display the relevant rows $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); $("tr").each(function(index) { $row = $(this); var id = $row.find("td:first").text().toLowerCase(); if (id.indexOf(value) !== 0) { $row.hide(); } else { $row.show(); } }); countRows(); }); }); function countRows() { $(".panel-catalog").each(function(){ // count the rows in all tables under each .panel-catalog that weren't hidden from the above code. var total = $(this).find('tr').length; // add count next to title $(this).find('.rowcount').text(total); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <div class="form-inline"> <div class="form-group"> <label for="search">Search</label> <input type="text" class="form-control" id="search" name="search"> </div> </div> <div class="panel-group accordion-group" id="accordion" role="tablist" aria-multiselectable="false"> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#procedures" aria-expanded="true" aria-controls="procedures"> <i class="fa fa-caret-right"></i> Procedures <span class="rowcount"></span> </a> </h4> </div> <div id="procedures" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <!-- Display Downloads BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Alpha-Amino Nitrogen by NOPA</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Alpha-Amino-Nitrogen-by-NOPA0821081.pdf" target="_blank">Alpha-Amino Nitrogen by NOPA</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 86 kB</td> </tr> <tr> <td style="display:none;">Brix: Hydrometer and Refractometer</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Brix-Hydrometer-and-Refractometer0818081.pdf" target="_blank">Brix: Hydrometer and Refractometer</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 43 kB</td> </tr> <tr> <td style="display:none;">Cold and Heat Stability</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-Cold-and-Heat-Stability0818081.pdf" target="_blank">Cold and Heat Stability</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Color (Wine, Juice, and Concentrate)</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Color-Wine-Juice-Concentrate0818081.pdf" target="_blank">Color (Wine, Juice, and Concentrate)</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Managing 'Stuck' Malolactic Fermentations with Viniflora®</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Managing-Stuck-MLF-with-Viniflora-11.091.pdf" target="_blank">Managing 'Stuck' Malolactic Fermentations with Viniflora®</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 87 kB</td> </tr> <tr> <td style="display:none;">Pectinase Enzyme Analysis</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Pectinase-Enzyme-Analysis0818081.pdf" target="_blank">Pectinase Enzyme Analysis</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 25 kB</td> </tr> <tr> <td style="display:none;">pH Determination</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-pH-Determination0818081.pdf" target="_blank">pH Determination</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 24 kB</td> </tr> <tr> <td style="display:none;">Restarting Stuck and Sluggish Fermentations</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Restarting-Stuck-and-Sluggish-Fermentation1.pdf" target="_blank">Restarting Stuck and Sluggish Fermentations</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 524 kB</td> </tr> <tr> <td style="display:none;">RS Determination Using Clinitest Tabs</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/RS-Determination-Clinitest-Tabs0818081.pdf" target="_blank">RS Determination Using Clinitest Tabs</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 32 kB</td> </tr> <tr> <td style="display:none;">SO2 (Free) Ripper Procedure</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/SO2-Free-Ripper-Procedure0818081.pdf" target="_blank">SO2 (Free) Ripper Procedure</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Sulfide Dectection Kit Instructions</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Sulfide-Detection-Kit-Instructions1.pdf" target="_blank">Sulfide Dectection Kit Instructions</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 65 kB</td> </tr> <tr> <td style="display:none;">Total Acidity (TA) Procedure</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-TA-Total-Acidity0818081.pdf" target="_blank">Total Acidity (TA) Procedure</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 28 kB</td> </tr> </tbody> </table> <!-- Display Downloads END --> <!-- <a href="http://privateurl.com/downloads/procedures/" class="btn btn-primary">View ALL forms &amp; downloads for Procedures.</a>--> <div class="clearfix"></div> </div> </div> </div> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#technical-data-sheets" aria-expanded="false" aria-controls="technical-data-sheets" class="collapsed" ;=""> <i class="fa fa-caret-right"></i> Technical Data Sheets </a> </h4> </div> <div id="technical-data-sheets" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"><span class="rowcount"></span> <div class="panel-body"> <!-- Display Downloads BEGIN --> <!-- Display Downloads END --> <ul class="list-unstyled"> <li> <h4>Enological Tannins</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Grap'tan E Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-E-Data-Sheet1.pdf" target="_blank">Grap'tan E Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 67 kB</td> </tr> <tr> <td style="display:none;">Grap'tan PC Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-PC-Data-Sheet1.pdf" target="_blank">Grap'tan PC Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 65 kB</td> </tr> <tr> <td style="display:none;">Grap'tan S Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-S-Data-Sheet1.pdf" target="_blank">Grap'tan S Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 63 kB</td> </tr> <tr> <td style="display:none;">Grap'tan V Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-V-PDS1.pdf" target="_blank">Grap'tan V Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 337 kB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Enzymes</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Bioseutica Lysozyme Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/lysozyme_sheet_v5_HR1.pdf" target="_blank">Bioseutica Lysozyme Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 421 kB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Filtration</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Carbac-PDS-0615111.pdf" target="_blank">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 316 kB</td> </tr> <tr> <td style="display:none;">Cellu-Flo FB PDS 100411</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Cellu-Flo040309.pdf" target="_blank">Cellu-Flo FB PDS 100411</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 3 MB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Fining Agents</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>KICK Carrageenan Kettle Finings</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Malolactic Bacteria, Fermentation Nutrition and Aids</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>MicroElements Nutrients</h4> <!-- Display Downloads Sub BEGIN --> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast Nutrition</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> </ul> <!-- <a href="http://privateurl.com/forms-downloads/" class="btn btn-primary">View ALL forms &amp; downloads for .</a>--> <div class="clearfix"></div> </div> </div> </div> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;=""> <i class="fa fa-caret-right"></i> Application Briefs </a> </h4> </div> <div id="application-briefs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <!-- Display Downloads BEGIN --> <!-- Display Downloads END --> <ul class="list-unstyled"> <li> <h4>Brewing Color</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Filter Cartridges</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> </ul> <!-- <a href="http://privateurl.com/downloads/application-briefs/" class="btn btn-primary">View ALL forms &amp; downloads for Application Briefs.</a>--> <div class="clearfix"></div> </div> </div> </div> </div> 

Answer 1

 $(document).ready(function() { //first cashe the rows and panels. if they are not dynamically added //or created to the page, this saves some dom lookups and increases performance var $allRows = $("tr"); var $panels = $(".panel-catalog"); // on search display the relevant rows $("#search").on("input", function() { //get the value, no need to wrap it var value = this.value.toLowerCase(); //assume everything doesn't match, hide everything $allRows.hide(); //find all the things that do match, that we need to show $allRows.filter(function(index){ //instead of doing $(this) we can use eq() to get the already wrapped element var $row = $allRows.eq(index); //here we find the first cell and get the text of it to compare against //if the indexOf returns > -1 it will return true which will cause the //element to be returned from the filter to be operated on (to show it) return ( $row.find('td:first').text().toLowerCase().indexOf(value) > -1 ); }).show(); //count how many rows $panels.each(function(index) { var $panel = $panels.eq(index); //here there are multiple panel-title elements and you want to set the //value of the one related to the particular panel. so we find the one //in the panel rather than a global .panel-title fine, which would //find them all // :visible is a matcher that filters out any element that is not display hidden //we set the html, rather than appending, to replace the entire value $panel.find('.panel-title a').html( $panel.find('tr:visible').length ); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <div class="form-inline"> <div class="form-group"> <label for="search">Search</label> <input type="text" class="form-control" id="search" name="search"> </div> </div> <div class="panel-group accordion-group" id="accordion" role="tablist" aria-multiselectable="false"> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#procedures" aria-expanded="true" aria-controls="procedures"> <i class="fa fa-caret-right"></i> Procedures </a> </h4> </div> <div id="procedures" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <!-- Display Downloads BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Alpha-Amino Nitrogen by NOPA</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Alpha-Amino-Nitrogen-by-NOPA0821081.pdf" target="_blank">Alpha-Amino Nitrogen by NOPA</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 86 kB</td> </tr> <tr> <td style="display:none;">Brix: Hydrometer and Refractometer</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Brix-Hydrometer-and-Refractometer0818081.pdf" target="_blank">Brix: Hydrometer and Refractometer</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 43 kB</td> </tr> <tr> <td style="display:none;">Cold and Heat Stability</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-Cold-and-Heat-Stability0818081.pdf" target="_blank">Cold and Heat Stability</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Color (Wine, Juice, and Concentrate)</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Color-Wine-Juice-Concentrate0818081.pdf" target="_blank">Color (Wine, Juice, and Concentrate)</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Managing 'Stuck' Malolactic Fermentations with Viniflora®</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Managing-Stuck-MLF-with-Viniflora-11.091.pdf" target="_blank">Managing 'Stuck' Malolactic Fermentations with Viniflora®</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 87 kB</td> </tr> <tr> <td style="display:none;">Pectinase Enzyme Analysis</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Pectinase-Enzyme-Analysis0818081.pdf" target="_blank">Pectinase Enzyme Analysis</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 25 kB</td> </tr> <tr> <td style="display:none;">pH Determination</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-pH-Determination0818081.pdf" target="_blank">pH Determination</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 24 kB</td> </tr> <tr> <td style="display:none;">Restarting Stuck and Sluggish Fermentations</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Restarting-Stuck-and-Sluggish-Fermentation1.pdf" target="_blank">Restarting Stuck and Sluggish Fermentations</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 524 kB</td> </tr> <tr> <td style="display:none;">RS Determination Using Clinitest Tabs</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/RS-Determination-Clinitest-Tabs0818081.pdf" target="_blank">RS Determination Using Clinitest Tabs</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 32 kB</td> </tr> <tr> <td style="display:none;">SO2 (Free) Ripper Procedure</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/SO2-Free-Ripper-Procedure0818081.pdf" target="_blank">SO2 (Free) Ripper Procedure</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 26 kB</td> </tr> <tr> <td style="display:none;">Sulfide Dectection Kit Instructions</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Sulfide-Detection-Kit-Instructions1.pdf" target="_blank">Sulfide Dectection Kit Instructions</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 65 kB</td> </tr> <tr> <td style="display:none;">Total Acidity (TA) Procedure</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Procedure-for-TA-Total-Acidity0818081.pdf" target="_blank">Total Acidity (TA) Procedure</a> </td> <td style="text-align:right;"> </td> <td style="width:150px; text-align:center;"> PDF – 28 kB</td> </tr> </tbody> </table> <!-- Display Downloads END --> <!-- <a href="http://privateurl.com/downloads/procedures/" class="btn btn-primary">View ALL forms &amp; downloads for Procedures.</a>--> <div class="clearfix"></div> </div> </div> </div> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#technical-data-sheets" aria-expanded="false" aria-controls="technical-data-sheets" class="collapsed" ;=""> <i class="fa fa-caret-right"></i> Technical Data Sheets </a> </h4> </div> <div id="technical-data-sheets" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <!-- Display Downloads BEGIN --> <!-- Display Downloads END --> <ul class="list-unstyled"> <li> <h4>Enological Tannins</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Grap'tan E Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-E-Data-Sheet1.pdf" target="_blank">Grap'tan E Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 67 kB</td> </tr> <tr> <td style="display:none;">Grap'tan PC Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-PC-Data-Sheet1.pdf" target="_blank">Grap'tan PC Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 65 kB</td> </tr> <tr> <td style="display:none;">Grap'tan S Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-S-Data-Sheet1.pdf" target="_blank">Grap'tan S Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 63 kB</td> </tr> <tr> <td style="display:none;">Grap'tan V Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/TAN-V-PDS1.pdf" target="_blank">Grap'tan V Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 337 kB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Enzymes</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Bioseutica Lysozyme Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/lysozyme_sheet_v5_HR1.pdf" target="_blank">Bioseutica Lysozyme Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> </td> <td style="width:150px; text-align:center;"> PDF – 421 kB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Filtration</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> <tbody> <tr> <td style="display:none;">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Carbac-PDS-0615111.pdf" target="_blank">Carbon Filter Media - Carbac Filter Sheet Series Product Data Sheet</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 316 kB</td> </tr> <tr> <td style="display:none;">Cellu-Flo FB PDS 100411</td> <td style="width:50px; text-align:center;"> <i class="fa fa-file-pdf-o"></i> </td> <td> <a href="http://privateurl.com/wp-content/uploads/2015/05/Cellu-Flo040309.pdf" target="_blank">Cellu-Flo FB PDS 100411</a> </td> <td style="text-align:right;"> <span class="label label-primary">Winemaking</span> <span class="label label-primary">Brewing</span> <span class="label label-primary">Distilling</span> <span class="label label-primary">Juice Processing</span> </td> <td style="width:150px; text-align:center;"> PDF – 3 MB</td> </tr> </tbody> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Fining Agents</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>KICK Carrageenan Kettle Finings</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Malolactic Bacteria, Fermentation Nutrition and Aids</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>MicroElements Nutrients</h4> <!-- Display Downloads Sub BEGIN --> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast Nutrition</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> </ul> <!-- <a href="http://privateurl.com/forms-downloads/" class="btn btn-primary">View ALL forms &amp; downloads for .</a>--> <div class="clearfix"></div> </div> </div> </div> <div class="panel panel-catalog"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;=""> <i class="fa fa-caret-right"></i> Application Briefs </a> </h4> </div> <div id="application-briefs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <!-- Display Downloads BEGIN --> <!-- Display Downloads END --> <ul class="list-unstyled"> <li> <h4>Brewing Color</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Filter Cartridges</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> <li> <h4>Yeast</h4> <!-- Display Downloads Sub BEGIN --> <table class="table table-striped table-condensed"> </table> <!-- Display Downloads Sub END --> </li> </ul> <!-- <a href="http://privateurl.com/downloads/application-briefs/" class="btn btn-primary">View ALL forms &amp; downloads for Application Briefs.</a>--> <div class="clearfix"></div> </div> </div> </div> </div> 

Answer 2

@Brandi，我已對此進行了編輯以執行我認為您想要的操作。

首先，您需要在您的H4.panel-title中添加一個span標簽，以將數字放入其中。您不能只添加它。 因為您需要能夠在數字更改時更換它。 請參閱下面的代碼段中的span.rowcount。

<h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#application-briefs" aria-expanded="false" aria-controls="application-briefs" class="collapsed" ;="">
                <i class="fa fa-caret-right"></i>
                Application Briefs                  </a>
      <span class="rowcount"></span>
            </h4>

</div>

接下來，您需要使用一個類而不是$ row.hide（）來隱藏行，因為您需要一種計數手風琴旋轉打開時將可見的行的方法。 當手風琴隱藏了（'：visible'）后，將無法使用

tr.hideme { display: none; }

然后，將行計數代碼拉入一個函數，該函數在頁面加載時在$（'search'）。on（'keyup'函數中被調用。

完整的工作代碼如下，這是一個小玩意兒，展示了它的實際作用： http : //jsfiddle.net/za7pcv9t/

$(document).ready(function() {
  // on search display the relevant rows
  $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();

        $("tr").each(function(index) {
          $row = $(this);
          var id = $row.find("td:first").text().toLowerCase();
          if (id.indexOf(value) !== 0) {
            $row.addClass('hideme');
          } else {
            $row.removeClass('hideme');
          }
        });
      setRowCounts();
    });

   setRowCounts();


});

function setRowCounts(){
     //count how many rows
    $(".panel-catalog").each(function() {
      // count the rows in all tables under each .panel-catalog that weren't hidden from the above code.
      var total = $(this).find('tr').not('.hideme').length;
      // add count next to title
      $(this).find('span.rowcount').text(total);
    });
}