2011-06-04 57 views
0

所以我想从这样的页面得到的音乐流派以下列表维基百科的元素列表:试图擦洗使用jQuery/JavaScript的

http://en.wikipedia.org/wiki/List_of_styles_of_music:_A-F

从我可以告诉使用Chrome的“检查元素”,我需要访问<ul>元素的<li>元素的标题元素。然后我需要访问这些变量,以便我可以将它们输入到数据库中(但我可以做的那部分)。

那么如何获得所有的ul - > li - >标题元素?我甚至不确定如何连接到该wikipedia.org网页,以便我可以开始清理。我相对较新的jQuery,但真的很享受它的超棒的力量!

谢谢你们。

+2

嗯,你为什么使用Javascript这样做呢?这真的会成为将数据放入数据库的方式吗? – lonesomeday 2011-06-04 17:07:35

+0

嗯,我只想获得标题名称,然后使用AJAX请求将它们传递给PHP脚本。 – maxcollins 2011-06-04 17:14:49

回答

0

你可以使用一些XPath的帮助:

var snapshot = document.evaluate('//ul/li/a[1]/@title', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 

这是XPath查询相匹配的文档中创建的所有节点的快照。上述XPath查询<ul>的孩子<li>的孩子的第一个链接元素的title属性。

后你得到的快照,你可以通过它进行迭代,并获得名字:

for (var i = 0; i < snapshot.snapshotLength; i ++) console.log(snapshot.snapshotItem(i).nodeValue); 

(你可以在上面的代码在Chrome的Web检查控制台运行)


你也可以在PHP中执行相同的操作,只需将该文档加载到DOMDocument中:

$doc = new DOMDocument; 
$doc->loadHTML(file_get_contents('http://en.wikipedia.org/wiki/List_of_styles_of_music:_A-F')); 

并使用XPath进行查询:

$xp = new DOMXPath($doc); 
foreach ($xp->query('//ul/li/a[1]/@title') as $node) { 
    echo "$node->nodeValue\n"; 
} 
0
$.ajax({ 
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_styles_of_music%3A_A-F%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22bodyContent%22%5D%2Ful%2Fli%2Fa'&format=json&diagnostics=true", 
    success: function(e){ 
     $.each(e.query.results.a,function(i,c){ 
      $('ul').append($('<li />').text(c.title)); 
     }); 

    } 
}); 

例子:http://jsfiddle.net/niklasvh/DW2p3/