如何使用HTML列表中的鏈接數據填充jQuery對象？

Question

我有一個看起來像這樣的列表：

<ul id="theLinks"> 
<li><a href="one.php">One</a></li> 
<li><a href="two.php">Two</a></li> 
<li><a href="three.php">Three</a></li> 
<li><a href="four.php">Four</a></li> 
</ul> 

我想填充一個jQuery對象與該列表中的數據，所以它看起來是這樣的：

var Links = { 
    'One' : 'one.php', 
    'Two' : 'two.php', 
    'Three' : 'three.php', 
    'Four' : 'four.php' 
} 

什麼是最好的方法爲了解決這個問題？

在此先感謝！

Answer 1

var Links = {}; 
$('#theLinks li a').each(function(){ 
    Links[this.innerHTML] = this.href.substring(this.href.lastIndexOf("/") + 1); 
}); 

Fiddle link

注：的鏈接不會爲了因爲這不是一個數組。

輸出：

Four: "four.php" 
One: "one.php" 
Three: "three.php" 
Two: "two.php" 

Answer 2

你的結果不是一個數組，它是一個對象。 （和它的無關jQuery的，這是一個直JavaScript對象:-)）。

這裏是你會怎麼做：

var Links = {}; 
$('#theLinks > li > a').each(function() { 
    var $this = $(this); 
    Links[$this.text()] = $this.attr('href'); 
}); 

Live example

注意我相當使用限制性選擇器，#theLinks > li > a（僅限a只有當它是直接子li只有當它是#theLinks的直接子）。如果您的結構可能稍有不同，您可以使用較寬鬆的結構，例如允許ul和li之間以及li和a之間的中間元素的#theLinks li a。這完全取決於你想達到的目標。但有了你給的標記，我可能會相當緊張。

Answer 3

沒有測試，但是這樣的事情：

var Links = {}; 
$('#theLinks li a').each(function(index, value) {   
    Links[value.text()] = value.attr('href'); 
}); 

Answer 4

var obj = {}; 
$("#theLinks a").map(function() {obj[$(this).text()] = this.href }); 
alert(obj.One); 
alert(obj.Two); 

演示：http://jsfiddle.net/karim79/9SPUY/