jQuery隱藏所有元素

Question

如果<span>標記之一具有value變量中的類，我想隱藏表行。

變量val來自選擇框。

 $(".hostgroup").change(function(event) { var val = $(this).val(); console.log(val); $("#groups > span").each(function() { $(this).closest("tr").show(); $(this).removeClass("hd"); }); $("#groups > span").each(function() { if ($(this).hasClass(val)) {} else { $(this).closest("tr").hide(); $(this).closest("tr").addClass("hd"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="hostgroup" data-placeholder="Choose a hostgroup..."> <option value="delete">delete</option> <option value="add">add</option> <option value="OS">OS</option>> </select> <tr> <td id="groups"> <span class="add">add,</span> <span class="OS">OS,</span> </td> </tr> <tr> <td id="groups"> <span class="delete">delete,</span> <span class="OS">OS,</span> </td> </tr> 

例如：我選擇delete，它應該只顯示在delete類中沒有<span>表行。 但是現在它將隱藏所有結果。

Answer 1

$("span.delete").parent().parent().hide()

將使用“ delete”類隱藏其中具有跨距的整個行。 在“更改”事件中將類交換為您選擇的值。

編輯：

應該是這樣的：

$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("span."+val).parent().parent().hide()
});

Answer 2

您可以根據tr搜索類，請參見下面的工作示例：

 $(".hostgroup").change(function(event) { var val = $(this).val(); $("tr").each(function() { if ( $(this).find('.' + val).length ) { $(this).closest("tr").addClass("hd"); } else { $(this).closest("tr").removeClass("hd"); } }); }); 

 .hd { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="hostgroup"> <option></option> <option>add</option> <option>OS</option> <option>delete</option> </select> <table> <tr> <td class="groups"> <span class="add">add,</span> <span class="OS">OS,</span> </td> </tr> <tr> <td class="groups"> <span class="delete">delete,</span> <span class="OS">OS,</span> </td> </tr> </table>