Question

这么简单的概念，但我很难表达出来......为我的冗长而道歉。

我有一个带有类的容器div，例如;我想用那个类做两件事：

将一个类（例如，'active'）添加到其ID与div＃container类相匹配的nav元素（例如，＃nav-primary li＃apples）
如果此元素的ID的 part 与#container的类匹配（例如，div＃secondary-apples）

我假设有一个.each（）循环来检查主要导航列表项的ID，并检查辅助导航的div ID ...虽然后者需要修剪其前缀......或者我应该更简单地说，如果辅助导航div ID 包含 div＃container？

我尝试过这样的一些变体：

<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

您无需使用.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');
});

Answer 2

不确定我是否了解您的需求：

将一个类（例如'active'）添加到其ID与div＃container类相匹配的nav元素（例如，＃nav-primary li＃apples）

#适用于id s，不适用于课程。 CSS类使用.表示，例如.myclass！表达式li#没有意义。你是说li #apples吗？在这种情况下，您可以退出li：无论如何，只有一个元素只有id'apple'，因此额外的li选择器无效。

如果此元素的ID的一部分与#container的类匹配（例如，div＃secondary-apples）
，则将相同的类添加到另一个元素

也许您正在寻找~=和*= selectors？例如，您可以选择E[foo*="bar"]。还要确保不被.each方法所欺骗：jquery经常对所有匹配的元素进行操作。您提供的each方法可能不是您想要的，因为它不访问this，也不访问'循环变量'：据我所知，声明不正确。

Answer 3

感谢munch和mnemosyn。

蒙克 - 太离谱了！这种简单性就是我从一开始就追求的但却无法将它拼凑在一起......顺便说一下，默认情况下没有“主动”类，所以我能够修剪2行你的解决方案 - 一件美丽的东西！ ......我之前发现了这个解决方案，我感到非常高兴：

$(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

将元素的类与另一个元素的ID或另一个元素的ID的* part *相匹配

3 个答案: