I have the same element:
<div id="demo_div" style="display:none;"></div>
on both page1.html and page2.html.
The JavaScript has access both to page1.html and page2.html. When I access element with
$("#demo_div")
I get element that is the first in the DOM (page1.html and page2.html are tabs of index.html, so one of them is hidden but always exist in the DOM).
Is that possible to get the element from a particular page?
UPDATE 1:
The entire HTML:
<html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Test Index Page</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link href="css/styles.css" rel="stylesheet">
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.min.js"></script>
<script src="modules/page1.js?version=5"></script>
<script src="modules/page2.js?version=5"></script>
</head>
<body>
<div id="wrap">
<div id="content" style="display:none;">
<div id="main_tabs">
<ul id="tabs_header">
<li><a href="#Home">Home</a></li>
<li><a href="modules/page1.html?version=3">Page1</a></li>
<li><a href="modules/page2.html?version=14">Page2</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
UPDATE 2:
I can’t have unique IDs because I use .load for loading page2.html as hidden part of page1.html thus I will have duplicate elements.
UPDATE 3:
I run the JavaScript from within a .js file that is linked to index.html so it has access to its siblings (page1.html and page2.html).
Just in case someone missed it. The problem can be solved using dynamically added classes when you know what page is loading. Just add a class to the div:
Nevertheless: Remove the duplicate IDs, they will produce unexpected behaviour 🙂