JQuery, selecting children of visible div

Question

MY HTML is something like this:

<div id="paj_container" class="container">
    <div class="three_paj_els">

    <div id="1" class="a_paj_element">
        <input type="hidden" class="listed_hidden_img" value="http://google.com/whatever.png" />
    </div>                               

    <div id="2" class="a_paj_element">
        <input type="hidden" class="listed_hidden_img" value="http://google.com/whatever2.png" />
    </div>  

    <div id="3" class="a_paj_element">
        <input type="hidden" class="listed_hidden_img" value="http://google.com/whatever3.png" />
    </div>                       
    </div>
</div>

To spare you flipping through more code, pretend each of the .a_paj_element divs is a separate page in my JQuery pagination.

To decrease page load time my plan is to shove the images on the pagination into those hidden input types' values. When the page is visible, JQuery will grab those values and use the replace with function to replace them with tags so the images load as you flip through the pagination pages instead of all at once. Here's what I've been trying to do to achieve this:

var currentPage = $('.three_paj_els:visible');
currentPage.children('.listed_hidden_img').each(function() {
    var the_image_SRC = $(this).val();
    $('.listed_hidden_img').replaceWith('<img src="'+the_image_SRC+'" />');
});

Basically I'm trying to get the .listed_hidden_imgs replaced only in the current visible .three_paj_els

I've done this with before with lightboxes/modals to decrease load time on pages with high resolution pictures it works well on that so I figured that this would work in this application too.

Thanks a bunch for reading this far and thanks in advance to anyone who can help correct my code.

-Mike

Answer 1

var the_image_SRC = $（this）.attr（'src'）;