Question

你好我带有ajax返回结果的显示框，里面有1到4个列表元素

按向下箭头我正在为下一个列表项设置彩色边框。我试过'.next（）'。会发生什么，当我按下箭头时，除第一个之外的所有元素都会突出显示我不能这样做。帮助我

$('.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');
}

我试图粘贴它但由于PHP代码生成html而导致其失真

这是近似副本

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

$ usr_img $ usr_namex （附加消息）

Answer 1

请提供您的html代码，next（）绝对应该选择下一个列表项。您是否正在使用它的类名（.target_frnd_content）选择正确的列表

项？

Answer 2

好吧我想这就是问题所在：

$('.target_frnd_content').next().css('border','2px dashed #6698FF');

它应该是：

$('.target_frnd_content').next().css({'border':'2px dashed #6698FF'});

请记住，在添加任何样式时，必须将JSON对象传递给css（）方法。希望有所帮助。

Answer 3

好的，我明白了。基本上你是通过它的类名“target_frnd_content”选择项目，我相信你会给其余的项目提供相同的类名，这就是为什么它选择所有下一个项目，因为每个项目都有相同的类名。您必须唯一标识每个列表项，可以通过向每个列表项添加id属性。你还能做些什么呢？

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

然后在javascript中你会说：

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

现在，您可以在css文件中为当前类设置所需的样式，例如：

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

Answer 4

尝试：

$('.target_frnd_content').next().css({'border-width','2px', 'border-style': 'dashed', 'border-color': '#6698FF'});

使用.next（）遍历列表项的问题

4 个答案: