0

I am jQuery beginner, and currently i am doing some exercising, on every thing i learn - it's about couple of days i started doing jQuery course.

this is the jsfiddle http://jsfiddle.net/nPcZJ/ example which i am working on,

i was wondering is there a better way to achieve the same result?

however a friend of mine told me if we have got 1000 questions displayed on a particular page and we want to show / hide the answer based on which questions was clicked.

he said that would cause lack of loading the page...?
it seems to be working perfectly with a few questions. but how about as he said 1000 questions..? is this really true if i have got 1000 questions that would cause the page not to load...?

$(document).ready(function(){
    $("dt").click(function(){
        var qst = $(this).parent().find('dd');
        $(qst).slideToggle();
    })
})

<dl>
     <dt>Q-1 What is your favorite scripting language ?</dt>
     <dd style="display: none">Ans - PHP, C++ </dd>      
</dl>

<dl>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>  
<dl>
    <dt>Q-3 Where are you from ?</dt>
     <dd style="display: none">Ans - I am from Russia</dd>  
</dl>

<dl>
    <dt>Q-4 Can you build small scripts - complex scripts ?</dt>
    <dd style="display: none">Ans - Yes, i can build small - complex scripts and from scratch</dd>
</dl>
Mohammed Allam
  • 59
  • 1
  • 2
  • 10
  • 1
    What do you mean by **lack of loading**? Check this fiddle http://jsfiddle.net/nPcZJ/1/ which seems to work fine. (1673 questions copy - pasted ) – Selvakumar Arumugam Apr 26 '13 at 20:31
  • There is an easy way to answer this question: create a page with 1000 questions and see if it loads. – Todd Gibson Apr 26 '13 at 20:32
  • Do you mean lag? Maybe your friend means [this](http://stackoverflow.com/questions/16244322/large-dom-tree-slowing-down-jquery-click-events) – a better oliver Apr 26 '13 at 20:33
  • The more stuff you have on a page, the slower it loads. Does that answer your question? – Asad Saeeduddin Apr 26 '13 at 20:33
  • 2
    `qst` is already a jquery object, no need to re-wrap it. Just do `qst.slideToggle();`. And I see no reason this code would cause loading issues. Though I have no idea who would answer 1000 questions. Anything will be slow if it gets large enough though. If you really needed 1000 you should probably look into event delegation. – James Montagne Apr 26 '13 at 20:33
  • No, it wouldn't stop the page loading (though it might be slower to load/render). Incidentally, you don't have to wrap all the questions/answers into their own `dl` elements. I know you've said you've only just started learning, but the following works (even for multiple `dd` elements): http://jsfiddle.net/davidThomas/nPcZJ/2/ – David Thomas Apr 26 '13 at 20:33
  • Why do you have a separate definition list for every question? – j08691 Apr 26 '13 at 20:34
  • @j08691: I wondered that, he's mentioned taking a class, so maybe they've not covered `nextUntil()`, or similar DOM traversal, yet? – David Thomas Apr 26 '13 at 20:35
  • thanks David, i have never seen .nextUntil() yet - but i will check it out on jQuery-Documention - – Mohammed Allam Apr 26 '13 at 20:48

1 Answers1

0

you could prevent jQuery from traversing/searching in the large DOM for its parent and child by direct accessing the sibling dd from your event.target.nextElementSibling

$("dt").click(function(e){
    var qst=e.target.nextElementSibling; // which is same as $(this).next();
    //var qst = $(this).parent().find('dd');
    $(qst).slideToggle();
});

funny is, so its also possible to have shorter markup like

<dl>
    <dt>Q-1 What is your favorite scripting language ?</dt>
    <dd style="display: none">Ans - PHP, C++ </dd>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>     
</dl>
Ol Sen
  • 3,163
  • 2
  • 21
  • 30