Question

Basically on .show() I’ve been trying to have all of the inputs convert to image tags with the img src equaling the original inputs value like this:

var currentPage = $('.three_paj_els:visible');
var nextPage = currentPage.next('.three_paj_els');
var the_parent_div_id = currentPage.attr('id');
    nextPage.show(function() {
        $('div#' + the_parent_div_id + ':input').each(function() {
            var the_image_SRC = $(this).val();
            $(this).replaceWith('<img src="' + the_image_SRC + '" ')
        })
    })

Been at it for a few hours now. I want only the ones in that specific div that gets shown to convert.

here’s a fiddle of what I’ve been working on http://jsfiddle.net/Utr6v/100/
when you click the next button, the <input type="hidden" /> tags should convert to <img> tags and the images should show.

Thanks a bunch in advance.
-Sal

Answer 1

currentPage doesn’t seem to have an ID. But you’re overcomplicating it – if you have the element, you can use that to execute jQuery functions on. You don’t need to do an element -> ID -> element conversion since that’s pointless.

To find descendants you need to put a space between the element selector and the descendant selector, otherwise the selector applies to the elements themselves. In your case, you can just use .find.

Also, you were missing the closing tag of the image.

http://jsfiddle.net/Utr6v/101/

// I guess you want to replace with images on the new page, not the one
// which gets hidden

nextPage.find(':input').each(function() {
    var the_image_SRC = $(this).val();
    $(this).replaceWith('<img src="' + the_image_SRC + '">')
});