Question

我有一些同一个类的div，我需要隐藏除第一个类之外的每个类的所有div，但是在这里，诸如critical或major这样的类可以根据条件进行更改。它不会总是相同的。下面的脚本。

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
</div>

脚本

<script>
    $(document).ready(function(){

    });
  </script>

Answer 1

您可以使用：not和：first选择器

$('.critical:not(:first)').hide();

Answer 2

一个小的，可重用的，易于理解的功能。

$(function() {
  function hideExceptFirst(selector) {
    var i = 0;
    $(selector).each(function() {
      if (i > 0) {
        $(this).hide();
      }
      i++;
    });
  }
  hideExceptFirst('.critical');
  hideExceptFirst('.major');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div id="critical">
    <h4 id="test" class="critical">critical 1</h4>
  </div>
  <div id="critical">
    <h4 id="test" class="critical">critical 2</h4>
  </div>
  <div id="critical">
    <h4 id="test" class="critical">critical 3</h4>
  </div>
  <div id="major">
    <h4 id="test" class="major">major 1</h4>
  </div>
  <div id="major">
    <h4 id="test" class="major">major 2</h4>
  </div>
</div>

Answer 3

在该示例中，您仅有的带有类的项目是H4元素。使用您的示例（如果名称会动态更改），您可以通过以下方式做到这一点：

保留一个数组，其中已过滤了哪些类。您可以遍历每个DIV并将ID像类一样对待，但这不符合HTML标准。

$(document).ready(function(){
  var groups = [];

  $("h4").each(function(){
    var thisGroup = $(this).attr("class");
    if(groups.indexOf(thisGroup) > -1){
      $(this).parent().hide();
    }
    else{
      groups.push(thisGroup);
    }   
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
</div>

Answer 4

这是尝试使用destructuring来轻松获取除类名的第一个元素以外的所有内容。

对于示例HTML，当输入为“关键”或“主要”（不带引号）时，此方法将起作用。

function hideAllButOneClass() {
  const classInput = document.getElementById('classInput').value;
  const queryClass = '.' + classInput;
  const instancesOfClassName = $(queryClass);
  // destructuring here
  const [first, ...rest] = instancesOfClassName;
  rest.forEach(entry => {
    const entryParent = $(entry).parent()[0];
    $(entryParent).hide();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="classInput">Class to hide<input ref="classInput" id="classInput" type="text"/>
<button onclick="hideAllButOneClass()">Hide class (except first)</button>
  
<div class="main">
	<div id="critical">
	<h4 id="test" class="critical">critical</h4>
	</div>
	<div id="critical">
	<h4 id="test" class="critical">critical</h4>
	</div>
	<div id="critical">
	<h4 id="test" class="critical">critical</h4>
	</div>
	<div id="major">
	<h4 id="test" class="major">major</h4>
	</div>
	<div id="major">
	<h4 id="test" class="major">major</h4>
	</div>
</div>

Answer 5

如果至少知道它们由.main元素包装，则可以尝试逐个遍历元素，然后在元素已被访问的类中将其隐藏。检查下一个示例。

$(document).ready(function()
{
    let targets = $(".main > div");
    let visitedClasses = [];

    targets.each(function()
    {
        let innerH4 = $(this).find("h4");

        if (visitedClasses.includes(innerH4.attr("class")))
           $(this).hide();
        else
           visitedClasses.push(innerH4.attr("class"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div id="critical">
    <h4 id="test" class="critical">critical 1</h4>
  </div>
  <div id="critical">
    <h4 id="test" class="critical">critical 2</h4>
  </div>
  <div id="critical">
    <h4 id="test" class="critical">critical 3</h4>
  </div>
  <div id="major">
    <h4 id="test" class="major">major 1</h4>
  </div>
  <div id="major">
    <h4 id="test" class="major">major 2</h4>
  </div>
</div>

作为旁注，您应该真正跳过多个元素的id属性的重复。

如何在jQuery中隐藏除第一类以外的每个类的所有div

HTML

脚本

5 个答案: