Add body #id based on url
<p>Need help! I've been looking for a solution for this seemingly simple task but can't find an exact one. Anyway, I'm trying to add custom #id to the  tag based on the page's URL. The script I'm using works ok when the URLs are like these below.</p>

<pre><code>- http://localhost.com/index.html
- http://localhost.com/page1.html
- http://localhost.com/page2.html
-&gt; on this level, &lt;body&gt; gets ids like #index, #page1, #page2, etc...
</code></pre>

<p>My question is, how can I make the body #id still as #page1 or #page2 even when viewing subpages like this?</p>

<pre><code>- http://localhost.com/page1/subpage1
- http://localhost.com/page2/subpage2
</code></pre>

<p>Here's the JS code I'm using (found online)</p>

<pre><code>$(document).ready(function() {
    var pathname = window.location.pathname; 
    var getLast = pathname.match(/.*\/(.*)$/)[1];
    var truePath = getLast.replace(".html",""); 
            if(truePath === "") { 
                    $("body").attr("id","index");
            }
            else { 
                    $("body").attr("id",truePath);
            }       
    }); 
</code></pre>

<p>Thanks in advance!</p>

<p>edit: Thanks for all the replies! Basically I just want to put custom background images on every pages based on their body#id. >> js noob here.</p>

<pre><code>http://localhost.com/page2/subpage2 - &gt; my only problem is how to make the id as #page2 and not #subpage2 on this link.
</code></pre>
