未显示第n个孩子的孩子

Question

There is a number of dynamically generated divs with hidden child. I need to display a the hidden child only in certain children (i really don't know how to word it better :) )

Here is the html of it

<div class="totalwrap">
   <div> a bunch of content</div>
   <div class="dynamicallygenerated">
      <div class="hiddenchild"></div>
   </div>
   <div class="dynamicallygenerated">
      <div class="hiddenchild"></div>
   </div>
</div>

css

 .hiddenchild {display:none;}

and jquery

$(".totalwrap .dynamicallygenerated:nth-child(2) .hiddenchild ").css('display','block');

what did i miss?

Answer 1

Do it with CSS instead. There's no need to use jQuery for this.

 .hiddenchild { display: none; } .dynamicallygenerated:last-child .hiddenchild { display: block; } 

 <div class="totalwrap"> <div> a bunch of content</div> <div class="dynamicallygenerated"> 1 <div class="hiddenchild">Hidden child of 1</div> </div> <div class="dynamicallygenerated"> 2 <div class="hiddenchild">Hidden child of 2</div> </div> </div> 

Answer 2

use :eq() insted of nth-child()

$(".totalwrap .dynamicallygenerated:eq(0) .hiddenchild").css("display","block");

what you have done is right I think the problem is something else