homepage Welcome to WebmasterWorld Guest from 54.211.219.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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
ctoz

5+ Year Member



 
Msg#: 4298553 posted 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>
</div>

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... ?

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4298553 posted 10:59 pm on Apr 15, 2011 (gmt 0)

Did you remember to include the jQuery UI library (vs. only the jQuery library)?
[api.jquery.com...]

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.

[jqueryui.com...]

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

<html>
<head>
<style type="text/css">
p {
color: red;
}
</style>
<title>Test</title>
</head>
<body>
<form action="#">
<input type="button" value="Click Me" onclick="exIt('.class1');">
</form>
<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>
</div>
<script>
function exIt(cl) {
$(cl + ' > p').animate({color:"#0f0"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#00f"}, 1600, function() {
$(cl + ' > p').delay(800).hide();
});
});
}
</script>
</body>
</html>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4298553 posted 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.

ctoz

5+ Year Member



 
Msg#: 4298553 posted 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