Solution 1 :

You can use eq(index) for this:

$('.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>

Solution 2 :

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/

<script>
     $(document).ready(function(){     
      $(".main .showonce:first-child").css("background-color", "yellow");
     });
 </script>

enter image description here

enter image description here

$('div').first()

$(".showonce:first")

OR

var divValue = $('div:first')

OR

$('div').eq(0)

$(".showonce").eq(0)

Solution 3 :

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

<!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>

Problem :

I’m looping through a resultset which produces the following 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

Result need to be like

1
3

Comments

Comment posted by jogin shar

Thank you @palaSh but can you check please updated html

Comment posted by LDS

By