Compact way to write multiple selector
Hello, I use jQuery to hide / show table rows. The HTML and CSS code is
HTML
- <ul class="dropdown-menu" role="menu" id="quickSearch">
<li id="all">
<a href="#">All claims</a>
</li>
<li id="fc">
<a href="#">Field Claim (FC)</a>
</li>
<li id="zh">
<a href="#">Zero Hours (ZH)</a>
</li> ...
JS
- $("#quickSearch li").click(function() {
var claimTyps = $(this).attr("id");
if (claimTyps == "all") {
$("tr.fc-row, tr.zh-row, tr.se-row, tr.qc-row, tr.gc-row, tr.exqc-row").show();
}
else if (claimTyps == "fc") {
$("tr.fc-row").show();
$("tr.zh-row, tr.se-row, tr.qc-row, tr.gc-row, tr.exqc-row").hide();
}
else if (claimTyps == "zh") {
$("tr.zh-row").show();
$("tr.fc-row, tr.se-row, tr.qc-row, tr.gc-row, tr.exqc-row").hide();
} ...
I was wondering if there is a more compact way to write the selector
- $("tr.fc-row, tr.zh-row, tr.se-row, tr.qc-row, tr.gc-row, tr.exqc-row")
(I used tr.xx-yyy instead of simply .xx-yyy because i believe that the class selector + element tag is a fastest selector)
Thanks