將一個元素的類匹配到另一個元素的ID或另一個元素ID的* part *

Question

這樣一個簡單的概念，但我努力表達它......事先對我的冗長表示歉意。我有一個類，例如，一個容器的div;我想使用這個類做兩件事情：

1. 添加一個類別（例如，「主動」）的導航元素的ID類的div＃容器（例如，＃NAV-一次Li＃蘋果的匹配）
2. 同一類添加到另一元件時，如果該元件的ID的部分類#container的（例如，DIV＃二次蘋果）

我假定有一個。每個（）循環到匹配檢查主導航列表項的ID，並檢查輔助導航的div ID ...儘管後者需要修改其前綴......或者我應該多說一點簡單地說，如果輔助導航div ID 包含 div＃容器的類？

我試過的東西有一些變化是這樣的：

<script type="text/javascript"> 
    $(document).ready(function() { 

    $('#nav-primary li').each(function(){ 
     var containerClass = $('#container').attr('class'); 
     var secondaryID = $('#nav-primary li').attr('id'); 

      // something like 
      if ('#nav-primary li id' == (containerClass) 
      { 
      } 

      // or should I first store a variable of the LI's ID and do something like this: 
      if (secondaryID == containerClass) 
      { 
      } 

      // and for the trickier part, how do I filter/trim the secondary nav div IDs, something like this: 
     var secondaryNavID = $('#aux-left div[id ... something here to strip the 'secondary-' bit ... ]'); 

     }); // end each 

}); // end doc.ready.func 
</script> 

標記是，例如：您的任何建議

<div id="container" class="apples"> ... 
    <ul id="nav-primary"> 
     <li id="apples"> ... 
     <li id="oranges"> ... 
     <li id="bananas"> ... 
    </ul> 



<div id="aux-left"> 
    <div id="secondary-apples"> ... 
    <div id="secondary-oranges"> ... 
    <div id="secondary-bananas"> ... 

非常感謝， SVS

Answer 1

感謝蒙克和mnemosyn。

蒙克 - 離譜！這種簡單性是我從一開始就想要的，但卻不能將它拼湊在一起......順便說一句，默認情況下沒有「主動」類，所以我能夠修剪你的解決方案的兩行 - 美的一件事！ ...我很高興作爲一個蛤，我以前發現這個解決方案：

$(document).ready(function() { 
    var containerClass = $('#container').attr('class'); 

    $('#nav-primary li').each(function(){ 
     var secondaryID = $(this).attr('id'); 
     if (secondaryID == containerClass) 
      { 
       $(this).addClass('active'); 
       $('#aux-left').find('div[id*="'+secondaryID+'"]').each(function(){ 
        $(this).addClass('active'); 
       }); // end #aux-left.find 
      }  // end if 
    }); // end #nav-primary.each  
}); // end doc.ready.func 

...但你的更好！

巨大的謝謝你！

歡呼聲，svs

Answer 2

不知道我是否瞭解您的需求：

添加一個類別（例如， '活動的'）到nav元件的ID類DIV＃容器（例如，＃NAV-一次Li＃蘋果）

的#爲id S，不匹配爲類。 CSS類使用.表示，例如， .myclass！表達式li#沒有意義。你的意思是li #apples？在這種情況下，您可以將li取出：無論如何，只能有一個元素與id'蘋果'，因此額外的li選擇器沒有幫助。

同一類添加到另一個元素，如果該元素的ID的一部分類#container的（例如，DIV＃二次蘋果）

也許你正在尋找的~=和*=匹配selectors？例如，您可以選擇E[foo*="bar"]。另外請確保不要被.each方法愚弄：jquery經常在所有匹配的元素上運行。您提供的each方法可能不是您想要的，因爲它不訪問this，也不訪問'循環變量'：就我所知，聲明不正確。

Answer 3

您不需要使用.each()循環導航元素。你只需要正確的jQuery selectors。

$(document).ready(function(){ 
    var containerClass = $('#container').attr('class'); 
    $('#nav-primary li.active').removeClass('active'); 
    $('#nav-primary li#'+containerClass).addClass('active'); 
    $('#aux-left div.active').removeClass('active'); 
    $('#aux-left div[id$='+containerClass+']').addClass('active'); 
});