如何使用Jquery動態獲取所有元素的屬性值？

Question

嘿， 我有一個導航菜單和我的代碼看起來像這樣..

<ul id="nav"> 
     <li><a href = "#countries" >Countries</a></li> 
     <li><a href = "#states" id="">States</a></li> 
     <li><a href = "#cities">Cities</a></li> 
     <li><a href = "#areas">Areas</a></li> 
    </ul> 

我想動態獲取所有屬性的值取決於用戶點擊例如，如果在Countires用戶點擊它應該獲取值#countries，如果用戶點擊狀態，它應該獲取值#states等等。

我知道jQuery中的.attr（）。該函數只會獲取匹配元素集中的第一個元素。無論我點擊它，只會抓取＃個國家。我不想成爲這種情況。

我正在使用以下jQuery代碼。

<script type="text/javascript"> 
$(document).ready(function(){ 
    //when the user clicks on Navigation Menu call this function 
    $('ul#nav li a').click(function(){ 
     //fetch the attribute value. 
     $value = $('ul#nav li a').attr("href"); 
     alert($value); 

     //Stop the default behaviour 
     return false; 
    }); 
}); 
</script> 

如何動態獲取所有屬性值並將值存儲在不同的變量中？

Answer 1

這將這樣的伎倆：

var $value = $(this).attr('href'); 

內單擊處理中，this價值是指被點擊的元素。

Answer 2

改變這一行：

$value = $('ul#nav li a').attr("href"); 

要這樣：

var $value = $(this).attr('href'); 

甚至只是這樣的：

var $value = this.getAttribute('href'); 

（請注意，getAttribute在IE6和IE7的實施被打破）