javascript - Trying to traverse the DOM so unique video will play when certain div is clicked -

so, have requirement dynamically generated content blocks on page. these blocks have thumbnail , when clicked, should open modal, , display unique overlay window, as unique associated video.

i trying write generic javascript traverse dom tree properly, when particular thumbnail clicked, modal, associated overlay, , associated video open.

here example of have (there many of these, dynamically added):

<div class="block">     <div class="thumbnail">         //thumbnail image     </div>     <p>video description</p>     <div class="window hide">         <div class="video hide">             //video content         </div>     </div> </div> <div id="modal" class="hide"></div> 

and after attempting bunch of different things, ended trying javascript, doesn't work:

$(".thumbnail").on("click",function(){      $("#modal").removeclass("hide").addclass("show");      $(this).closest(".window").removeclass("hide").addclass("show");      $(this).closest(".video").removeclass("hide").addclass("show"); }); 

css basic:

.hide { display: none; } .show { display: block; } 

trying make click function generic possible work on .thumbnail clicked. i've interchanged find(".window") , children(".window") nothing happens. ideas on i'm doing wrong? thanks!

depending on want classes be, i'd use code:

$(".thumbnail").on("click", function () {     var $block = $(this).closest(".block");     $block.find(".window, .video").add("#modal").removeclass("hide").addclass("show"); }); 

demo: http://jsfiddle.net/glmsf/ (using different, yet similar code)

it finds right elements, based on clicked .thumbnail. finds containing .block element, looks @ descendants find .window , .video elements.

if want include . in attributes, need escape them jquery selection.

as styling, should have styling display: block; default, , toggle hide class. it's less work, , makes more sense logically.