[英]How to hide last table row with specific class in table with jQuery
我有一個包含一系列具有以下結構的表的頁面
<table>
<thead>
<tr>
<th>2</th>
<th>Position</th>
<th>Names</th>
</tr>
</thead>
<tbody>
<tr class="station-12 odd"><td>12</td><td>AO</td><td id="2-1-12-am">Name goes here</td> </tr>
<tr class="station-12 even"><td></td><td>FF</td><td id="2-2-12-am">Name goes here</td> </tr>
<tr class="station-12 odd"><td></td><td>PFF</td><td id="2-3-12-am">Name goes here</td> </tr>
<tr class="separator even"><td colspan="3"></td> </tr>
<tr class="station-13 odd"><td>13</td><td>AO</td><td id="2-1-13-am">Name goes here</td> </tr>
<tr class="station-13 even"><td></td><td>FF</td><td id="2-2-13-am">Name goes here</td> </tr>
<tr class="station-13 odd"><td></td><td>PFF</td><td id="2-3-13-am">Name goes here</td> </tr>
<tr class="separator even"><td colspan="3"></td> </tr>
<tr class="station-18 odd"><td>18</td><td>AO</td><td id="2-1-18-am">Name goes here</td> </tr>
<tr class="station-18 even"><td></td><td>FF</td><td id="2-2-18-am">Name goes here</td> </tr>
<tr class="station-18 odd"><td></td><td>PFF</td><td id="2-3-18-am">Name goes here</td> </tr>
<tr class="separator even"><td colspan="3"></td> </tr>
<tr class="station-19 odd"><td>19</td><td>AO</td><td id="2-1-19-am">Name goes here</td> </tr>
<tr class="station-19 even"><td></td><td>FF</td><td id="2-2-19-am">Name goes here</td> </tr>
<tr class="station-19 odd"><td></td><td>PFF</td><td id="2-3-19-am">Name goes here</td> </tr>
</tbody>
</table>
此結構存在於日歷類型的頁面上,其中一個月中的每一天都有一張表格。 我有一些使用選擇列表和按鈕過濾顯示行的工作代碼。
$('form#my-form').submit(function(context, settings) {
// First, display any rows that are hidden.
$('table#my-table tbody tr :hidden').show();
// Get items not selected in select list and hide them.
$('select#edit-stations').find('option').not(':selected').each(function(i, option) {
var station_id = $(this).val();
var station_class = '.station-' + station_id;
$(station_class).hide().parent().find('.separator').last().hide();
});
// Keep form from being submitted.
return false;
});
隱藏部分的工作原理很像。 我遇到的問題是嘗試隱藏最后一個station-x行之后的最后一個分隔符行。 例如,如果我隱藏了station-18
和station-19
行,那么我也想隱藏在station-13
行之后的.separator行。 如您在我的代碼中看到的那樣,我的想法是遍歷父元素(在本例中為<tbody>
),找到所有<tr class="separator">
元素並將其隱藏,但這是行不通的。 如果我在該行上放置一個斷點並在控制台中輸入$(station_class).hide().parent()
,我只會得到一個空數組,因此顯然我沒有錯誤地使用.parent()。 我也嘗試過.closest()
,但是沒有運氣。
我關閉了嗎,或者有更好/更輕松的方式來做我想做的事情?
謝謝。
重新檢查您的代碼后,我注意到您的語法有問題。 具體來說,這條線
$(station_class).hide().parent().find('.separator').last().hide();
應該更改為
$(station_class).parent().find('.separator').last().hide();
您兩次調用hide()
方法。
嘗試與siblings()
$(station_class).hide().siblings('.separator').last().hide();
更新:
您也可以嘗試使用單獨的行代碼。
var sep = $(station_class).hide();
sep.siblings('.separator').last().hide();
我會這樣做:
每個站點(第一個站點除外)生成之前
<tr class="separator station-nn"><td colspan="3"></td> </tr>
其中nn =下一個站的站號。
然后,在關閉工作站時,只需關閉分隔符行。
。換句話說每個站都有前述它,即與該站相關聯的分離器。 當然除了第一站...
嘗試next()看起來很簡單而且動態
$('。station-18')。hide()。next('。separator')。hide()
請嘗試下面的演示。
$(document).ready(function() { setTimeout(function() { $('.station-12').hide().next('.separator').hide(); }, 1000); setTimeout(function() { $('.station-13').hide().next('.separator').hide(); }, 2000); setTimeout(function() { $('.station-18').hide().next('.separator').hide(); }, 3000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th>2</th> <th>Position</th> <th>Names</th> </tr> </thead> <tbody> <tr class="station-12 odd"> <td>12</td> <td>AO</td> <td id="2-1-12-am">Name goes here</td> </tr> <tr class="station-12 even"> <td></td> <td>FF</td> <td id="2-2-12-am">Name goes here</td> </tr> <tr class="station-12 odd"> <td></td> <td>PFF</td> <td id="2-3-12-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-13 odd"> <td>13</td> <td>AO</td> <td id="2-1-13-am">Name goes here</td> </tr> <tr class="station-13 even"> <td></td> <td>FF</td> <td id="2-2-13-am">Name goes here</td> </tr> <tr class="station-13 odd"> <td></td> <td>PFF</td> <td id="2-3-13-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-18 odd"> <td>18</td> <td>AO</td> <td id="2-1-18-am">Name goes here</td> </tr> <tr class="station-18 even"> <td></td> <td>FF</td> <td id="2-2-18-am">Name goes here</td> </tr> <tr class="station-18 odd"> <td></td> <td>PFF</td> <td id="2-3-18-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-19 odd"> <td>19</td> <td>AO</td> <td id="2-1-19-am">Name goes here</td> </tr> <tr class="station-19 even"> <td></td> <td>FF</td> <td id="2-2-19-am">Name goes here</td> </tr> <tr class="station-19 odd"> <td></td> <td>PFF</td> <td id="2-3-19-am">Name goes here</td> </tr> </tbody> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.