Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>A few notes:</p> <ol> <li>To check if an element has a class, never use <code>.attr("class") ==</code>. If the element has more than one class, or the attribute is poorly formatted, this will never match. jQuery provides <code>.hasClass()</code> for just this purpose. <code>$(this).hasClass('selected')</code></li> <li>You don't need to loop through each element with <code>.each()</code> to see if one has a class. You can call <code>.hasClass()</code> on the whole group.</li> <li>Likewise to select an element with a class, use <code>.myclass</code> not <code>[class="myclass"]</code>. This is for similar reasons as point #1. <code>var sel = $("#result li.selected");</code></li> <li>To see if an element is the last sibling, don't use <code>sel.next().text() == ''</code>. This will end up calling <code>text()</code> on an undefined object (because there is none). Instead use <code>.length</code> to see if there is/isn't a next object: <code>sel.next().length == 0</code></li> <li>You probably don't need to search when the up/down keys are pressed. I would put an <code>if/then</code> statement to do the up/down stuff separate from searching.</li> <li>Your up and down code will be very similar. Instead of using a <code>case</code> for each key, use the same code for both, but modify it slightly depending on whether you have up or down.</li> <li>Using <code>keyup</code> and <code>keydown</code> will cause your up/down keys to fire twice, meaning your user will only be able to step 2 or more items at a time. Either just use one, or only respond to one for the up/down code using <code>if(event.type == 'keydown') {</code></li> </ol> <p>With all of that, everything seems to work ok:</p> <p><a href="http://jsfiddle.net/wgQE5/2/" rel="nofollow">http://jsfiddle.net/wgQE5/2/</a></p> <p>Is there some other behavior you were wanting?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload