如果 DOM 元素没有 id 属性，则在请求之间识别 DOM 元素？

Question

我使用localStorage（实际上是在store.js shim 的帮助下）编写了一个快速而肮脏的解决方案来存储（并激活）页面请求上最后选择的Bootstrap 3 导航选项卡窗格。它似乎工作正常，是的，我不太擅长 JavaScript。

无论如何，脚本都可以存储基于window.location.href 和导航选项卡id 属性计算的密钥：

<!-- 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>

问题：导航选项卡的id 属性在Bootstrap 3 中不是强制性的。我可以在不强制设置id 属性的情况下使我的脚本工作吗？有没有办法在没有id（可能是它的位置）的情况下识别 DOM 元素？如果同一页面在请求之间返回稍微修改的 DOM 怎么办？

如果重要，这里是脚本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

您可以使用jQuery.eq(index)将其按位置放置在jquery结果中，因此要获得“主页”选项卡，您需要查找$("tabselector li").eq(0)

注意它是基于 0 的。

---

文档：https://api.jquery.com/eq/