сопоставление класса элемента с идентификатором другого элемента или * часть * идентификатора другого элемента

Question

Такая простая концепция, но я изо всех сил пытаюсь выразить ее ... заранее извиняюсь за многословие.

У меня есть контейнер div с классом, например; Я хочу использовать этот класс для двух вещей:

1. добавить класс (например, 'активный') к элементу nav, чей ID соответствует классу контейнера div # (например, # nav-primary li # яблок)
2. добавить тот же класс к другому элементу, если часть идентификатора этого элемента соответствует классу #container (например, div # second-apple)

Я предполагаю, что есть цикл .each (), чтобы проверить идентификаторы элементов списка первичной навигации и проверить идентификаторы div вторичной навигации ... хотя последний должен обрезать свой префикс ... или я должен Проще говоря, если вторичные идентификаторы div nav содержат класс контейнера 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

Вам не нужно перебирать элементы навигации с помощью .each(). Вам просто нужны правильные селекторы jQuery .

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

Благодаря Мунку и Мнемосыну.

Мунк - возмутительно! Эта простота - то, к чему я стремился с самого начала, но просто не мог собрать ее вместе ... и, кстати, по умолчанию нет «активного» класса, поэтому я смог обрезать 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

... но ваш еще лучше!

Огромное спасибо!

ура, свс

Answer 3

Не уверен, что понимаю ваши потребности:

добавить класс (например, 'активный') к элементу nav, чей ID соответствует классу контейнера div # (например, # nav-primary li # яблок)

# для id с, а не для классов. Классы CSS указаны с помощью ., например, .myclass! Выражение li# не имеет смысла. Вы имели в виду li #apples? В этом случае вы можете опустить li: в любом случае должен быть только один элемент с id 'яблочками', поэтому дополнительный селектор li не поможет.

добавить тот же класс к другому элементу, если часть идентификатора этого элемента соответствует классу #container (например, div # second-apple)

Возможно, вы ищете селекторы ~= и *= ? Вы можете, например, выбрать E[foo*="bar"]. Также убедитесь, что вас не обманывает метод .each: jquery часто работает со всеми соответствующими элементами в любом случае. Предоставленный вами метод each, вероятно, не тот, который вам нужен, потому что он не обращается к this и не является «переменной цикла»: насколько я вижу, объявление неверно.