Access element common to each page in Dom

I'm sure someone will know this. But this keeps biting me not being too experience with jquery.mobile.

Lets say I have a site with 5 pages each generated from a base template that has a <div> in it. I transition from one page to the next my swiping.

So each page has a div like

</div>

If I understand correctly I will have five mydiv's in the dom when all the pages load.

I want to do something like change the content of this div on page show or create events.

How do I access the div on that page ?

I have tried things like

$(document).on('pagecontainerbeforeshow', function() {

var element = $(this).find('.mydiv');

});

However, as I go to new pages the "element" variable above is a collection of all the divs on the five pages.

What's the best practice for accessing the particular div on the currently show page ?

I could set a unique id for each div but not sure how I would know the unique id in the event handler.

Hope that makes some sense.

Thanks

Topic Participants