如何使用jQuery選擇器獲取第三個或第四個元素並設置其ID爲

Question

我想獲得第三個或第四個元素並設置其ID。

我發現：

$('#menu li:first').attr('id', 'test') 

其實際工作，但我只得到了第一個元素。另一方面，我試圖使用以下，但它不工作。

$('#menu li').get(0).attr('id', 'test') 

有人可以解釋如何獲得理想的元素？ （例如4或5）並設置其ID，爲什麼第二堆代碼不工作？

Answer 1

可以使用eq()方法：

$('#menu li').eq(2).attr('id', 'third') // selects third element 
$('#menu li').eq(3).attr('id', 'fourth') // selects fourth element 

Answer 2

嘗試使用.eq函數。

$('#menu li').eq(4).attr(...) 

或

$('#menu li:eq(4)').attr(...) 

在一個側面說明.get(0)回報你一個DOM元素，而不是jQuery對象。

Answer 3

$('#menu li:eq(3)').attr('id', 'id_4'); 
$('#menu li:eq(4)').attr('id', 'id_5'); 

或

$('#menu li').eq(3).attr('id', 'id_4'); 
$('#menu li').eq(4).attr('id', 'id_5'); 

eq()或:eq()兩者取目標元素的參數索引，它始終是

targetElementIndex - 1。因爲它是基於零的。

所以，如果你的目標第四或第五元素，那麼你必須給出的參數爲3和4

DEMO

Answer 4

$('#menu') 

選擇元素id爲「菜單」。

$('#menu li') 

或

$('#menu').find('li') 

選擇所有它的後代<li>和

$('#menu li').eq(3) 

選擇第四（因爲它們是從零標記的）。

還要注意

$('#menu li')[3] 

會得到，而不是它的jQuery的包裝的HTML元素本身。

Answer 5

正如評論中提到的，get（）返回DOM元素。

可以在不使用jquery的attr()的情況下設置元素的id。

$('#menu li').get(3).id = 'test';