Welcome to WebmasterWorld Guest from 54.211.136.250

Forum Moderators: open

Message Too Old, No Replies

using jQuery's child selector

children of a class, class as variable

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

5+ Year Member



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... ?
10:59 pm on Apr 15, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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>
11:00 pm on Apr 15, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month