Question

I basically have several divs each with ids “id_1”, “id_2” “id_3” etc. The divs are all initially empty.

I want on page load to populate all the divs with certain html content. But the part that has been troubling me is that I also need to extract the unique id portion for use within the html:

<div id="id_3">
     <div id="inner_3></div>
</div>

where the inner div is what gets printed. Notice that the ‘3’ is extracted from the container div id by the javascript and then subsequently used and printed in the inner div.

Any ideas how to do this with jquery? Thanks in advance.

Answer 1

You can fetch all the div elements that have an id that starts with a certain string:

$(function() {
    $('div[id^=id_]').each(function() {
        var id = $(this).attr('id').split('_').pop();
        $(this).html(
            $('<div/>').attr('id','inner_' + id)
        );
    });
});

Then you loop through each, get the id, and do your HTML manipulation.