显示来自多个具有相同类名的 DIV 的第一个 div
[英]Show first div from multiple DIVs with same class name
问题描述
I'm looping through a resultset which produces the following HTML:
我正在循环生成以下 HTML 的结果集：
<div class="main">
<div class="total-runs innerdiv showonce">1</div>
<div class="total-runs showonce">2</div>
</div>
<div class="main">
<div class="total-runs innerdiv showonce">3</div>
<div class="total-runs showonce">4</div>
</div>
i want to show only first div class name is Showonce我只想显示第一个 div 类名是 Showonce
Result need to be like结果需要像
1
3
3 个解决方案
解决方案1
1 已采纳 2020-02-29 07:09:41
You can use eq(index) for this:您可以为此使用eq(index) ：
$('.showonce').hide().eq(0).show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="total-runs innerdiv showonce">1</div> <div class="total-runs showonce">2</div> <div class="innerdiv showonce">3</div>
EDIT:编辑：
$('.main .showonce').hide() $('.main .showonce:first-child').show()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="total-runs innerdiv showonce">1</div> <div class="total-runs showonce">2</div> </div> <div class="main"> <div class="total-runs innerdiv showonce">3</div> <div class="total-runs showonce">4</div> </div>
解决方案2
1 2020-02-29 07:10:42
There are multiple ways to do it有多种方法可以做到
the .first() method constructs a new jQuery object from the first element in that set(source : https://api.jquery.com/first/ .first()方法从该集合中的第一个元素构造一个新的 jQuery 对象（来源： https : //api.jquery.com/first/
<script>
$(document).ready(function(){
$(".main .showonce:first-child").css("background-color", "yellow");
});
</script>
$('div').first()
$(".showonce:first")
OR或者
var divValue = $('div:first')
OR或者
$('div').eq(0)
$(".showonce").eq(0)
解决方案3
0 2020-02-29 09:54:02
i have read you question.我读过你的问题。
it is very easy to show only first and third child of your div you can simply add the following CSS in your style tag it will be done很容易只显示 div 的第一个和第三个孩子，您只需在样式标签中添加以下 CSS 即可完成
<!DOCTYPE html>
<html>
<head>
<style>
.showonce{
display:none;
}
.innerdiv{
display:block;
}
</style>
</head>
<body>
<p>The last paragraph in body.</p>
<div class="main">
<div class="total-runs innerdiv showonce">1</div>
<div class="total-runs showonce">2</div>
</div>
<div class="main">
<div class="total-runs innerdiv showonce">3</div>
<div class="total-runs showonce">4</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.