使用 .next() 遍历列表项的问题答案

【问题标题】：problem in traversing across list items using .next()使用 .next() 遍历列表项的问题
【发布时间】：2011-04-16 19:33:07
【问题描述】：

您好，我显示带有 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 （附加信息）

【问题讨论】：

你能提供一份包含列表的 HTML 代码吗？
我会使用 Firebug 并在此处复制输出的 HTML 代码。您在上面发布的内容没有帮助。

标签： jquery html-lists next

【解决方案1】：

好的，我明白了。基本上你是通过它的类名“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;}

【讨论】：

【解决方案2】：

请提供您的 html 代码，next() 绝对应该选择下一个列表项。您选择的列表是否正确

项目使用它的类名 (.target_frnd_content)？

【讨论】：

li项的ya类名是'target_frnd_content'

【解决方案3】：

好吧，我想问题出在这里：

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

应该是：

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

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

【讨论】：

即使现在我得到相同的结果
我尝试使用 '.hide' 而不是 .css 进行检查。它只适用于第一个元素以下的所有元素

【解决方案4】：

试试：

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

【讨论】：