如何使用 jquery 隐藏基于子类名的表行?
Posted
技术标签:
【中文标题】如何使用 jquery 隐藏基于子类名的表行?【英文标题】:How to hide table rows based on child class name using jquery? 【发布时间】:2017-01-31 00:33:28 【问题描述】:我有很多行,我想隐藏一些没有特定类的 tr。
例子:
<tr id="game-22590" class="game">
<td class="pos left-edge">
<div>2</div>
</td>
<td class="cost">
<input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
</td>
</tr>
<tr id="game-22591" class="game">
<td class="pos left-edge">
<div>3</div>
</td>
<td class="cost">
<input class="dollars-paid" type="text" value="23,99" tabindex="4">
</td>
</tr>
td.cost 有一个或两个类的输入。我想隐藏那些没有uncorrected
类的行。
【问题讨论】:
【参考方案1】:使用.filter()
选择行有uncorrected
类。
$("tr.game").filter(function()
return $(this).find("input.uncorrected").length == 0;
).hide();
$("tr.game").filter(function()
return $(this).find("input.uncorrected").length == 0;
).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="game-22590" class="game">
<td class="pos left-edge">
<div>2</div>
</td>
<td class="cost">
<input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
</td>
</tr>
<tr id="game-22591" class="game">
<td class="pos left-edge">
<div>3</div>
</td>
<td class="cost">
<input class="dollars-paid" type="text" value="23,99" tabindex="4">
</td>
</tr>
</table>
【讨论】:
【参考方案2】:您可以使用最接近的()方法 jQuery 来做到这一点...请检查此解决方案
$(".dollars-paid").not(".uncorrected").closest(".game").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr id="game-22590" class="game">
<td class="pos left-edge">
<div>2</div>
</td>
<td class="cost">
<input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
</td>
</tr>
<tr id="game-22591" class="game">
<td class="pos left-edge">
<div>3</div>
</td>
<td class="cost">
<input class="dollars-paid" type="text" value="23,99" tabindex="4">
</td>
</tr>
<tr id="game-22592" class="game">
<td class="pos left-edge">
<div>3</div>
</td>
<td class="cost">
<input class="dollars-paid" type="text" value="25,99" tabindex="4">
</td>
</tr>
</table>
【讨论】:
【参考方案3】:$("table tr.game").each(function()
var self=$(this);
if(!self.find("input").hasClass("uncorrected"))
self.hide();
);
Working DEMO
【讨论】:
以上是关于如何使用 jquery 隐藏基于子类名的表行?的主要内容,如果未能解决你的问题,请参考以下文章