How do you select a div which is a child of the current $(this)?
I have many divs with the class row, in each of which I have a hidden div called form_explanation. I want to show() the div form_explanation when the row is onClick-ed.
Thanks!
+4
A:
$('.row').bind('click', function () {
$(this).children('div.form_explanation').show();
});
If you want to hide all other divs:
$('.row').bind('click', function () {
$('div.form_explanation:visible').hide();
$(this).children('div.form_explanation').show();
});
Matt
2010-06-17 19:25:50
This only works if the div has a class="form_explaination", which should be the case. I just wanted to clarify.
EndangeredMassa
2010-06-17 19:26:32
If you have several rows, you probably want to use '.live' in place of '.bind'. It is significantly more efficient in older browsers.
Mervyn
2010-06-17 19:29:15
This works perfectly, thanks so much.
Walker
2010-06-17 19:30:04
Is onClick no good?
Walker
2010-06-17 19:30:23
@Walker: What do you mean? `onClick` is not a jQuery method. Do you mean `click`? or the DOM elements `onClick` method?
Matt
2010-06-17 19:31:20
by onclick I mean $(object).click(function() {
Walker
2010-06-17 19:32:02
@Walker: `$().click()` is just a shortcut for `$().bind('click', ..')`. Both will work. With the jQuery additions of `live()` and `delegate()` in the latest version releases, I just think it's more meaningful to use `bind()` than `click()` directly.
Matt
2010-06-17 19:34:00
@Matt: Sure, I'll definitely start doing that. Is there a way to select the div form_explanation from div on the same level?By that I mean that inside of <div class="row"> there is <input class="has_explanation"> and <div class="form_explanation">. Could I place a .bind('click' on the <input> and have it select the form_explanation div?
Walker
2010-06-17 19:37:39
I'm currently using$(this).parent().children('div.form_explanation').show(); but I'm hoping there's a cleaner way.
Walker
2010-06-17 19:39:00
@Walker: Check out the `siblings` method: http://api.jquery.com/siblings. Your code will be `$(this).siblings('div.form_explanation').show();`
Matt
2010-06-17 19:47:19
@Matt: Thanks! You've been a huge help.
Walker
2010-06-17 19:49:55
A:
try this out for your specific problem
$('.row').click(function() {
$('div#form_explanation').show('fast'); //or div.form_explanation you didn't specify
});
with regards to the first part of your question, you could do something like this in general:
$(this).children('div');
or something like if you don't have the $(this)
$('parent > child');
jordanstephens
2010-06-17 19:26:50