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動態設置類

回答

相關問題