соответствие классу элемента к идентификатору другого элемента, или *часть* идентификатора другого элемента
Такое простое понятие, но я изо всех сил пытаюсь выразить это... извинения заранее за мое многословие.
У меня есть контейнерное отделение с классом, например; я хочу использовать тот класс, чтобы сделать две вещи:
- добавьте класс (например, 'активные') к военно-морскому элементу, идентификатор которого соответствует классу div#container (например, #nav-primary li# яблоки)
- добавьте тот же класс к другому элементу, если часть идентификатора этого элемента соответствует классу #container (например, div#secondary-apples)
Я предполагаю, что существует .each () цикл, чтобы проверить идентификаторы элементов списка основного nav и проверить идентификаторы отделения вторичного устройства, военно-морского..., хотя последние потребности обрезать его префикс... или я должен сказать проще, если вторичные военно-морские идентификаторы отделения содержат класс 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
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
Не уверен, понимаю ли я ваши потребности:
добавьте класс (например, «активный») к элементу навигации, идентификатор которого соответствует классу div #container (например, # nav-primary li # apples)
# предназначен для id s, а не для классов. Классы CSS указаны с помощью . , например .myclass ! Выражение li # не имеет смысла. Вы имели в виду li #apples ? В этом случае вы можете не указывать li : в любом случае должен быть только один элемент с id 'apples', поэтому дополнительный селектор li не будет ' т полезно.
добавьте тот же класс к другому элементу, если часть идентификатора этого элемента соответствует классу #container (например, div # secondary-apples)
Возможно, вы ищете ~ = и * = селекторов ? Вы можете, например, выбрать E [foo * = "bar"] . Также убедитесь, что вас не обманул метод .each : jquery в любом случае часто работает со всеми совпадающими элементами. Метод each , который вы предоставили, вероятно, не тот, который вам нужен, потому что он не имеет доступа к this или к «переменной цикла»: насколько я могу судить, объявление неверно .
Вам не нужно перебирать элементы навигации с помощью .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');
});