如果DOM元素没有id属性，那么在请求之间确定DOM元素？

Question

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

无论如何，脚本都会存储根据window.location.href和nav tabs 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结果中，因此要获取“ home”标签，您需要查找$("tabselector li").eq(0)

请注意，它是基于0的。

---

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