image - Javascript - getElementById that have existing ids which are created dynmaically -

image - Javascript - getElementById that have existing ids which are created dynmaically -

i building page in expressionengine , each time user adds new image, id of img element increments 1 (to give each image unique id). example, if admin uploads 3 images ids each mainimg0, mainimg1, mainimg2. user can add together many pictures need to.

i'm using next javascript/jquery allow frontend user print images input button, right code prints first image. what's best way in js grab each unique id when user clicks print, respective image opens in new tab , printed?

here's current js:

$(document).ready(function(){ $('#printimg').click(function(){ pwin = window.open(document.getelementbyid("mainimg0").src,"_blank"); pwin.onload = function () {window.print();} }); });

here's output of html:

<div class="machine_parts_left"> <div class="machine_parts_left_img"> <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainimg0" src="{image}" alt="{image_title} diagram" /></a> <p>click zoom image</p> <input type="button" value="print image" id="printimg" /> </div> </div> <div class="machine_parts_left"> <div class="machine_parts_left_img"> <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainimg1" src="{image}" alt="{image_title} diagram" /></a> <p>click zoom image</p> <input type="button" value="print image" id="printimg" /> </div> </div> <div class="machine_parts_left"> <div class="machine_parts_left_img"> <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainimg2" src="{image}" alt="{image_title} diagram" /></a> <p>click zoom image</p> <input type="button" value="print image" id="printimg" /> </div> </div>

you traverse dom:

$('.printimg').click(function(){ // clicked element, find closest ancestor <div>, // search element <img> elements, utilize get() homecoming dom // node (not jquery collection): var img = $(this).closest('div').find('img').get(0), pwin = window.open(img.src,"_blank"); pwin.onload = function () {window.print();} });

note utilize of .printimg, instead of #printimg; since, seem realise in question, id must unique within document.

using class-selector (.printimg) requires amending html:

<div class="machine_parts_left"> <div class="machine_parts_left_img"> <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainimg0" src="{image}" alt="{image_title} diagram" /></a> <p>click zoom image</p> <input type="button" value="print image" class="printimg" /> </div> </div> <!-- other repeated elements removed brevity -->

references:

closest(). find(). get().

javascript image printing expressionengine