将一个元素的类匹配到另一个元素的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'); 
});