homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

using jQuery's child selector
children of a class, class as variable

 10:01 pm on Apr 15, 2011 (gmt 0)

What's the syntax for accessing the children of a class, where the class is a variable?

The html structure is multiple divs like this:
<div class="class1 class2 class3">
<p class="x"> lorem</p>
<p class="y"> ipsum</p>
<p class="z"> yadda</p>

The function does two color changes before going to 'display:none'

function exIt(cl) {
$(cl + ' > p').animate({color:"#ddd"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#333"}, 1600, function() {
$(cl + ' > p').delay(800).hide();
called with "exIt('.class1');"

(There's a structural reason for accessing the child <p> tags, rather than just the parent <div>s. Some <p> tags in some <div>s will have previously had a style change applied: if the changes are now applied only to the parents, some children won't change… at least not till they're hidden).

Anyway: the function isn't working: but it doesn't generate a FF error message, and doesn't stop subsequent chained functions from operating.

The syntax $(cl + ' > tag') works ok in another function.

Can't be too far off... ?



 10:59 pm on Apr 15, 2011 (gmt 0)

Did you remember to include the jQuery UI library (vs. only the jQuery library)?

Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.


Your example worked for me once I included the jQuery UI library as well:

<style type="text/css">
p {
color: red;
<form action="#">
<input type="button" value="Click Me" onclick="exIt('.class1');">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<div class="class1 class2 class3">
<p class="x"> lorem</p>
<p class="y"> ipsum</p>
<p class="z"> yadda</p>
function exIt(cl) {
$(cl + ' > p').animate({color:"#0f0"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#00f"}, 1600, function() {
$(cl + ' > p').delay(800).hide();


 11:00 pm on Apr 15, 2011 (gmt 0)

Side note, I used different color values just to make it more obvious that the animation was taking place.


 6:56 am on Apr 16, 2011 (gmt 0)

Thanks! Your demo works fine for me too.

I had both jQuery and UI downloaded and linked, forgot to mention UI.

So there's more testing to do: if the syntax is ok, and that's good to know, there's gotta be a stray glitch somewhere...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved