隐藏并启用 js 中具有相同类名的 Div 集

Hide and Enable set of Div with same class name in js

本文关键字：同类 Div 启用 js 隐藏      更新时间：2023-09-26

我需要隐藏除第一个div之外的所有具有相同类名的div。然后每个按钮单击我都必须在 js 中一个接一个地启用其他div。

<head>
</head>
<body>
    <div class ="TextDiv">1</div>
    <div class ="TextDiv">2</div>
    <div class ="TextDiv">3</div>
    <div class ="TextDiv">4</div>
    <div class ="TextDiv">5</div>
 <input type="submit" value="Show more" onClick>
<script>
function myFunction() {
}
</script>
</body>

您可以在 jQuery 选择器中过滤掉第一个<div />：

$(".TextDiv:not(:first)")

您仍然使用类TextDiv选择所有<div />，但删除具有选择器:not(:first)部分的第一个。

然后，您将能够隐藏、显示或切换元素(第一个元素除外(。

// Show all except first one
$(".TextDiv:not(:first)").show();
// Hide all except first one
$(".TextDiv:not(:first)").hide();
// Toggle all except first one
$(".TextDiv:not(:first)").toggle();

您可以查看此 JSFiddle 以获取示例。例如，除第一个<div />外，所有都被隐藏。

关于"显示更多"按钮，您可以获取TextDiv类可见的最后一<div />，转到下一个并显示它：

$("button").on("click", function() {
    $(".TextDiv:visible").last().next().show();
});

您可以查看此 JSFiddle 以获取示例。除第一个<div />外，所有都被隐藏，单击"显示更多"按钮将逐个显示其他<div />。

如果要在每次按下按钮时显示多个<div />，一种方法可能是使用 TextDiv 类选择所有隐藏<div />，使用 slice 函数仅选择前x个，然后显示它们。例如，要显示下一个隐藏的 5 个：

$("button").on("click", function() {
    $(".TextDiv:hidden").slice(0, 5).show();
})

您可以在 JSFiddle 上查看一个示例，每次按"显示更多"按钮时，都会显示隐藏的<div />五乘五。

：not(selector( 选择器匹配每个不是指定元素/选择器的元素。试试这个代码：

 $(document).ready(function(){
    $(".TextDiv:not(:first)").css("display","none");
    $('input [type="submit"]').click(function(){
    $('.TextDivdiv:hidden:first').css("display","block");
    });
    });
相关文章：