ansaurus

Question

how to wrap questions and answers in jQuery

Answer 1

+2 A:

There are several ways to solve the problem, but I'd do something like this:

<div class="question">
   Question
   <div class="answer" style="display: none;">
      Answer!
   </div>
</div>

And script-wise

$(document).ready(function() {
   $('.question').click(function() {
       $(this).find('.answer').slideDown('fast');
   });
});

David Hedlund 2010-07-13 06:42:59

I would probably rather do `$('.answer', this)` than `$(this).find('.answer')`, but it's more a matter of taste than anything else.

Tomas Lycken 2010-07-13 07:18:03

@Tomas Lycken: yes, that's probably preferable! there should be a slight overhead. i think they translate to the same, but yours is without the round-trip of wrapping `this` in `$`

David Hedlund 2010-07-13 07:28:12

@David: Should i create a div for every question? Because i will have more than 20 questions. and is it better to add id attribute for each div?

yakup 2010-07-13 07:29:51

@yakup85: yes, one div for each question. and they should all have the same *class* so that the jQuery can find them all in one go. don't bother with ID, because ID has to be unique for each element. regardless of how many copies you make of HTML like the one I've posted above, you don't have to change a bit in the jQuery script for it to work on all questions.

David Hedlund 2010-07-13 07:33:01

@David: I would guess, although I haven't looked at the source code, that `jQuery.find()` just returns what I did. However, you don't need to wrap `this` in `$` either - it is already a wrapped set, only Visual Studio can't see that if you don't wrap it. So `this.find('.answer')` is perfectly fine - and for less than thousands of questions, I doubt that there's really a perf hit.

Tomas Lycken 2010-07-13 08:24:48

@Tomas Lycken: yeah, it won't be measurable =) i think you're wrong about `this` though. in an event listener, the context is the DOM node, not pre-wrapped in `$`. So `$('div').click(function() { console.log(typeof this.find); });` logs `undefined`.

David Hedlund 2010-07-13 08:28:22

@David: Ha! Good catch there. You're right, of course =)

Tomas Lycken 2010-07-13 08:34:22

@David: Thanks!

yakup 2010-07-13 11:49:48

ansaurus

tags:

views:

answers:

how to wrap questions and answers in jQuery

related questions