Пожалуйста, обратите внимание, что это не прямой ответ на вопрос, но я чувствую, что это будет полезно для ОП и, надеюсь, других
Хотя я совершенно определенно согласен с тем, что в вашем случае вы можете наиболее просто использовать css для стилизации своих элементов (см. Ответ @ lennart для примера дочернего выбора), могут быть случаи, когда вам нужно быть более динамичным при применении стиля, вы может, конечно, использовать jquery .css() и аналогичные функции, возможно, действительно использовать старый добрый javascript, однако это обычно приводит к обходу dom, который может быть сложным даже с jquery, второй вариант - динамическое добавление таблиц стилей, что также может быть весьма эффективным третий вариант - изменить / манипулировать тегом <style>, например, у вас может быть стиль, определенный в некоторых данных json, где мы можем быть немного креативными, создать строку css и добавить ее в <style>
// turn #accordion into a simple accordion menu
// adds style to the head from json data
$(document).ready(function() {
// hide <ul> nested in accordion
$('#accordion').find('ul').hide();
// add click event to accordion .heading
$('#accordion').find('.heading').click(function(e) {
// do not follow anchor
e.preventDefault();
// slide up any open sections
if(!($(this).hasClass('open'))) {
$('.open').removeClass('open').next().slideUp();
}
$(this).addClass('open').next().slideToggle();
});
// a function that parses json and
// appends it to <style>
function addStyleFromJson(json) {
// turn json into normal string
var style = JSON.stringify(json);
// remove apostrophes, colons before {, opening and closing {}
style = style.replace(/(")|(:(?=\{))|(^\{)|(\}$)/g, '');
// remove commas after }
style = style.replace(/(\}|\;),/g, function($0, $1){
return $1 ? $1 + '' : $0;
});
// prepend this style with any style declared in <head>
style = $('style').text() + style;
// append style element to head
$('style').text(style);
}
// load some style
$.ajax({
url: 'http://dl.dropbox.com/u/47426368/somejson.js',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: 'myCallback',
cache: true,
success: addStyleFromJson
});
});
в этой демонстрации мы превращаем html в меню в стиле аккордеона, затем загружаем некоторый json из удаленного местоположения и анализируем его в теге <style> (предположим, он уже есть). Как я уже говорил ранее, это, возможно, не лучший вариант, и есть много вариантов, поэтому, как я сказал в своем комментарии, вы должны действительно изучить этот материал, чтобы использовать его, он ничем не отличается от езды на велосипеде или выполнения математики. магия просто (тяжелая) работа и преданность делу :-), я надеюсь, что это демонстрирует, как вы можете использовать несколько технологий относительно просто для создания чего-то более динамичного, что, я думаю, было одной из причин появления javascript
вот демоверсия