如果DOM元素沒有id屬性，請在請求之間標識DOM元素？

我寫了一個快速而骯髒的解決方案，使用localStorage（實際上在store.js墊片的幫助下）存儲（並激活）頁面請求中最後選定的Bootstrap 3導航選項卡窗格。它似乎工作正常，是的，我不擅長JavaScript。如果DOM元素沒有id屬性，請在請求之間標識DOM元素？

不管怎麼說腳本作品存儲計算的關鍵基礎上，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屬性的導航選項卡是不是在引導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));

來源

2014-03-30 gremo

您可以通過使用jQuery.eq(index)在jQuery的結果中的位置放置，這樣得到的「首頁」標籤，你會尋找$("tabselector li").eq(0)

請注意，它基於0。

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

來源

2014-03-30 18:27:14 JackW

的問題是對導航標籤的喜好唯一存儲在localStorage的。因爲在不同的頁面中可以使用不同的導航選項卡。有沒有辦法做到這一點，而不使用ID屬性？ – gremo

@gremo如果他們在不同的頁面中，因爲您使用頁面的ID和URL來計算它，當然這不是一個問題，他們在不同的頁面上具有相同的ID。如果你只是反對元素的ID，你可以給它一個像'data-tab-id =「GUID」'這樣的屬性，否則你可以從它那裏得到它的父母（和'.eq'，如果它可能共享家長）。如果你上傳一個JSFiddle，它可能更容易看到你的問題。 – JackW

如果DOM元素沒有id屬性，請在請求之間標識DOM元素？

回答

相關問題