Question

hi i display box with ajax returned results, which has 1 to 4 list elements in it

on press of down arrow i am setting a coloured border for the next list item . i tried with ‘.next()’ . what happens is , when i press down arrow the all elements except the first get highlighted
i couldnt do it. help me

$('.input_for_chain_and_target').keyup(function(){data_fr_chain_and_target(this.id);});
$('.input_for_chain_and_target').bind('keydown',controlling_with_nav_keys);



function controlling_with_nav_keys(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode==40){//alert('down');
    $('.target_frnd_content').next().css('border','2px dashed #6698FF');
}
else if(keycode==38){
    $('.target_frnd_content').prev().css('border','2px dashed #6698FF');
}

i tried to paste it but it gets distorted due to genration of html by php code

here is the approximate copy

<li style='border:1px solid #F4F3F0;' class='target_frnd_content' id=\"$target_frnd_content_id\">

$usr_img

$usr_namex
(Additional Message)

Answer 1

Okay, I get it. Basically you’re selecting the item through it’s class name which is “target_frnd_content” and I believe you would have given the same class name to rest of the items and that’s why it’s selecting all the next items as every item has the same class name. You must uniquely identify each list item, maybe by adding an id attribute to each one. What else you can do is something like this:

<ul class="some_list">
  <li class="current">Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

then in javascript you’ll say:

var current = $('li.current');
current.removeClass('current').next().addClass('current');

Now you can set whatever styling you want to the current class in the css file such as:

li.current{border: 2px dashed #6698FF;}