如何使用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/