如何使用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的实施被打破）