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>

jQuery隐藏所有元素

2 个答案: