Identify a DOM element between requests if DOM element doesn't have an id attribute?

Question

I wrote a quick and dirty solution to store (and activate) the last selected Bootstrap 3 nav tabs pane on page requests, using localStorage (actually with the help of store.js shim). It seems to work fine and yes, I'm not so good at JavaScript.

Anyways the script works storing the key computed based on the window.location.href and nav tabs id attribute:

<!-- Nav tabs -->
<ul id="nav-tab-settings" class="nav nav-tabs nav-remember">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home"><h2>Home</h2></div>
    <div class="tab-pane" id="profile"><h2>Profile</h2></div>
    <div class="tab-pane" id="messages"><h2>Messages</h2></div>
    <div class="tab-pane" id="settings"><h2>Settings</h2></div>
</div>

Question : id attribute for nav tabs is not mandatory in Bootstrap 3. Can I make my script work without forcing to set an id attribute? Is there a way to identify an DOM element without the id (maybe its position)? What if the same page returns a slightly modified DOM between requests?

If matters, here is the script navs-remember.js :

(function ($, store) {
    // Storage not available
    if (!store.enabled) {
        return;
    }

    $(function () {               
        var tabsSelector = '.nav.nav-tabs.nav-remember[id]',
            toggleSelector = 'a[data-toggle="tab"][href]';

        // Identify each nav tabs by current location and its id 
        var computeStorageKey = function (navId) {
            return window.location.href + '#' + navId;
        };

        // Restore last selected tab
        $(tabsSelector).each(function () {
            var nav = $(this),
                navId = nav.attr('id'),
                storedActiveHref = store.get(computeStorageKey(navId)),
                lastActiveToggle = null;

            if (!navId.length || (undefined === storedActiveHref)) {
                return;
            }

            // Get the toggle itself
            lastActiveToggle = nav.find('a[href="' + storedActiveHref + '"]')
                .first();

            // Show the tab
            if (lastActiveToggle.length) {
                lastActiveToggle.tab('show');
            }
        });

        $(tabsSelector + ' ' + toggleSelector).click(function () {
            var toggle = $(this),
                toggleHref = toggle.attr('href'),
                nav = toggle.closest(tabsSelector),
                navId = nav.attr('id');

            // Store toggle href attribute value
            if (toggleHref.length && nav.length && navId.length) {
                store.set(computeStorageKey(navId), toggleHref);
            }
        });
    });
}(jQuery, store));

Answer 1

You can place it by position in the jquery results using jQuery.eq(index) , so to get the "home" tab, you would look for $("tabselector li").eq(0)

Note that it is 0 based.

---

Documentation: https://api.jquery.com/eq/