хранить в переменной только первый или только второй класс элемента

Question

Я использую этот бит jQ для добавления класса к двум различным элементам на основе класса другого (родительского / дедушкин и т. Д.) Элемента:

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

Блестяще, но у меня есть две проблемы:

Во-первых, когда в <div id="main-content"> вообще нет класса, «активный» класс добавляется в все # nav-primary LI, а также в all the # aux-left DIVs; как я могу изменить это так, чтобы в отсутствие какого-либо класса на # main-content ничего не делать?

Во-вторых, как я могу нацелить только первый или второй из нескольких классов для хранения в переменной 'containerClass', например, <div id="main-content" class="apples bananas">?

Очень ценится! SVS

Answer 1

Для 1: сделайте предложение if после первой строки, например, как это:

if(containerClass.length > 1) {
   //your addClass code
}

// РЕДАКТИРОВАТЬ: Выше будет размещено после определения containerClass в вашем скрипте. Он просто проверяет, есть ли у контейнера класс или нет, измеряя содержимое переменной (.length). Если containerClass = "", это условие if будет ложным, и содержащийся код не будет выполнен. Следовательно, это должно предотвратить возникновение вашей первой проблемы: «активный» класс добавляется ко всем его дочерним элементам, независимо от того, есть у #main-content класс или нет

Для 2:

classes = containerClass.split(' '); //split by space
if(classes[1]) { //if there is a 2nd class
   //do something if there are multiple classes
   //access the 1st class with classes[0], etc.
} else {
   //do something if #main-content only has 1 class
}

// РЕДАКТИРОВАТЬ: в приведенном выше примере первая строка разделяется независимо от того, содержит ли переменная containerClass пробел. Вы можете сравнить это с функцией explode в php: скажем, ваш контейнер имеет 2 класса (class = "aplles bananas"), и в результате вы получите после разбиения на пустое пространство массив, который содержит оба этих класса, как это :

classes[0] = 'apples';
classes[1] = 'bananas';

Так что теперь у вас есть 1-й и 2-й классы, если они существуют.

Следующая строка в моем коде будет делать что-то, если у # main-content есть 2-й класс (здесь: "бананы"), но вы также можете проверить первый класс с помощью

if(classes[0]) { ...

Часть "else" в моем коде сработает, если у # main-content нет второго класса. Вы могли бы расширить вышеупомянутое условие if-else, сначала проверив, существует ли 1-й класс, затем проверив, существует ли 2-й класс, и затем сделав что-то еще (или ничего), если # main-content вообще не имеет никаких классов. Надеюсь, это прояснит ситуацию.

Надеюсь, это поможет. На несвязанной заметке вы можете добавить «jquery» к тегам этого поста, чтобы больше людей могли ее найти:)

Answer 2

Все еще не совсем там ... Я попробую еще раз, надеясь, что это пригодится другим:

Вот где я нахожусь (временно отложив необходимость проверить, что есть хотя бы одинкласс):

$(document).ready(function(){

contentClasses  = $('#main-content').attr('class');

contentClass    = contentClasses.split(' ');    // split by space

$('#nav-primary li#'+contentClass).addClass('active');
$('#aux-left div[id$='+contentClass+']').addClass('active');

}); // close doc.ready

... но это работает не так, как задумано, если в <div id="main-content"> имеется более одного класса.Как ни странно, «активный» класс добавляется соответственно к # nav-primary LI, но не к # aux-left div.Консоль сообщает следующее: «Предупреждение: ожидается, что ']' завершит выбор атрибута, но найден», «.»

Любое разъяснение будет с благодарностью.SVS