Hide image from second and third div using jquery

Question

I have the following div structure

<div class="block_content">
    <img src="image1.png">
</div>
<div class="block_content">
    <img src="image2.png">
</div>
<div class="block_content">
    <img src="image3.png">
</div>

Now I want to hide image2 and image3 and my code is

 $(document).ready(function ($){
    $('div.block_content').each(function() 
    {
         if($("div.block_content:eq(1)").find('img').length)
         {
            $("div.block_content:eq(1)").addClass('hide-for-small');
         } 
         if($("div.block_content:eq(2)").find('img').length)
         {
            $("div.block_content:eq(2)").addClass('hide-for-small');
         } 
    });
  });

but the above jquery code does nothing.I have to check each div because sometimes the div can content text only.So in short if text then show all of three divs else hide last 2 divs.

Any help is highly welcomed. Thanks in advance.

Answer 1

try :nth-child - CSS

$(".block_content:not(:first-child) img").hide();

or just css

.block_content:not(:first-child) img{ display:none}

if you don't want to use the :not try this

.block_content:nth-child(n+2) img{ display:none}

or this i hard but it will work too

img{ display:none}
.block_content:first-child img{ display:block}

or use the hidden attr

<div id="block1" class="block_content">
    <img src="image1.png" />
</div>
<div id="block_2" class="block_content">
    <img src="image2.png" hidden />
</div>
<div id="block_3" class="block_content">
    <img src="image3.png" hidden />
</div>