同じクラスのdivがいくつかあり、最初のdivを除く各クラスのすべてのdivを非表示にする必要がありますが、ここでは、クリティカルやメジャーなどのクラスは条件に基づいて変更できます。常に同じになるとは限りません。以下の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>
小さくて再利用可能な、わかりやすい機能。
$(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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加