[英]Identify a DOM element between requests if DOM element doesn't have an id attribute?
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). 我写了一个快速而肮脏的解决方案,使用
localStorage
(实际上是在store.js shim的帮助下)存储(并激活)页面请求上最后选择的Bootstrap 3导航选项卡窗格。 It seems to work fine and yes, I'm not so good at JavaScript. 看来工作正常,是的,我不太擅长JavaScript。
Anyways the script works storing the key computed based on the window.location.href
and nav tabs id
attribute: 无论如何,脚本都会存储根据
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>
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? 问题 :导航选项卡的
id
属性在Bootstrap 3中不是必需的。能否在不强制设置id
属性的情况下使脚本工作? Is there a way to identify an DOM element without the id
(maybe its position)? 有没有一种方法可以识别没有
id
(可能是其位置)的DOM元素? What if the same page returns a slightly modified DOM between requests? 如果同一页面在请求之间返回稍微修改的DOM怎么办?
If matters, here is the script navs-remember.js
: 如果有问题,这里是脚本
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));
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)
您可以使用
jQuery.eq(index)
将其按位置放置在jquery结果中,因此要获取“ home”标签,您需要查找$("tabselector li").eq(0)
Note that it is 0 based. 请注意,它是基于0的。
Documentation: https://api.jquery.com/eq/ 文档: https : //api.jquery.com/eq/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.