JQuery ul动态设置类

我是JQuery的新手，努力在列表中设置一个元素的属性。我有以下的HTMLJQuery ul动态设置类

<ul class="collections"> 
<li><a href="#" id="2">LINEN </a></li> 
<li><a href="#" id="3">ANIMAL PRINTS</a></li> 
<li><a href="#" id="4">BASKET WEAVE</a></li> 
<li><a href="#" id="5">FAUX LEATHER</a></li> 
<li><a href="#" id="6">FAUX SUEDE</a></li> 
<li><a href="#" id="7">HALLMARK</a></li> 
<li><a href="#" id="8">JUMBO CORD</a></li> 
<li><a href="#" id="9">PHYTHON</a></li> 
<li><a href="#" id="10">CHENILLE CARLTON</a></li>

我想属性class =“当前”添加到项目列表中的其中ID为2

我可以设置使用$('.collections a').attr('class','current');所有项目

我的2的ID使用具有检测项目：

if($('.collections a').attr('id') == 2){ 
     console.log('WE HAVE A MATCH'); 

    }

但在这里我不确定如何获得对实际元素的引用。

我已经成功设置类使用equals方法：

 $(".collections a:eq(0)").attr('class','current');

但我们更希望能够使用元素的ID的情况下，该列表的顺序应该改变其设置。

任何帮助将不胜感激。

在此先感谢。

问候

来源

2012-07-17 Bear

您不应该使用数字作为'id's。这是HTML4中的无效标记（虽然在HTML5中有效） – 2012-07-17 00:41:06

由于id属性应该是唯一的，这将做到这

$(".collections a#2").addClass("current")

但我强烈建议你不要到与数字

来源

2012-07-17 00:41:24

为什么不能？从HTML5开始，ID可以合法地从数字开始。向后兼容性也不是问题，因为这一直起作用，即使它违反规范。 – 2012-07-17 00:42:14

我不能使用上面的，也不能使用document.getElementById（'2'）。setAttribute（'class'，'current'）;因为我有一个单独的div中的另一个元素的id是2.这是我从数据库中直接拉取id的情况。是否有可能在collection类中搜索id为2的所需元素？ – Bear 2012-07-17 00:44:31

@JosephSiber只是为了向后兼容，并避免一些意外的行为，这可能会导致一些难以发现的错误 – 2012-07-17 00:44:37

这应该启动id -s罚款：

var id = 2; 
$('.collections li a').removeClass('current'); // reset current class 
$('#' + id).addClass('current'); // set current case given an ID

来源

2012-07-17 00:43:26 Martin

这里至少有几个问题需要回答。

来检索和设置的属性，使用$.prop()（link）
由其id属性检索元素使用散列选择器（$('#id_of_element')或$('li#id_of_li_element')）（full list of selectors here）
检查所检索的集合，看在$('selector').length。如果它没有找到任何东西，则为0，因此您可以使用if($('li#id_of_li').length){ ... };
不使用数字ID，因为有些浏览器看不到它们。总是用字母表示例<li id="li_1">而不是<li id="1">开始标识。
设置，检索和删除类，使用专用的方法$.addClass('classname')，$.hasClass('classname')和$.removeClass('classname')
来检查元素是否匹配符合特定选择，你可以使用$('elements').is('selector')（link here）

我真的希望这个清除一些问题

来源

2012-07-17 00:45:26

感谢您的详细回答，真的有所帮助。下面似乎在铬至少$（“。collections a：＃2”）。addClass（'current'）;但我怀疑它的正确性/跨浏览器兼容性。我打算删除重复的ID，并避免使用前导号码。 – Bear 2012-07-17 00:56:11

它是'$（'。collections a＃2'）。addClass（'current'）; '（在'a'和'＃'之间没有'：'）。如果你用一个字母而不是数字开始你的id，整个钻机将完全跨浏览器。 – 2012-07-17 01:19:05

JQuery ul动态设置类

回答

相关问题