JQuery 隐藏所有元素

debugcn 发表于 Dev

时间

如果<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>

例如：我选择删除，它应该只显示没有<span>删除类的表行。但现在它将隐藏所有结果。

扎卡里亚·阿查基

您可以根据搜索该类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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。