jQuery选择器输出在浏览器控制台和PhantomJS之间的不同

Question

为什么相同的jQuery选择器得到不同的结果？

网址：date=12/12/2014&adults=1&childs=0&infants=0&class=Economy&airline=&carrier=&intl=n&page=loaded

node.js /幻影-节点(桥)代码：

phantom.create(function(ph){
    ph.createPage(function(page){
        page.open("http://www.cleartrip.com/flights/results?from=BOM&to=DEL&depart_date=03/12/2014&return_date=12/12/2014&adults=1&childs=0&infants=0&class=Economy&airline=&carrier=&intl=n&page=loaded",function(){
            setTimeout(function(){
                page.evaluate(function(){
                    var flight= [];

                    $('table.resultUnitMini tbody tr:nth-child(2) td span span').each(function(){
                        flight.push($(this).html());
                    });

                    return {
                        x: flight
                    };
                },function(result){
                    console.log(result.x);
                });
            },15000);
        });
    });
});

这是浏览器控制台中的输出：

var flight = [];
undefined
$('table.resultUnitMini tbody tr:nth-child(2) td span span').each(function(){
    flight.push($(this).html());
});
flight
["G8-345", "9W-305", "AI-677", "AI-666", "AI-605", "AI-101", "G8-337", "6E-168", "6E-176", "6E-172", "6E-174", "6E-186", "6E-182", "G8-343", "6E-198", "G8-319", "G8-339", "G8-341", "6E-194", "6E-196", "6E-192", "AI-633", "AI-633", "AI-864", "AI-660", "AI-658", "G8-329", "9W-390", "9W-351", "G8-327", "6E-188", "G8-334", "6E-183", "6E-179", "AI-349", "AI-634", "AI-634", "AI-636", "AI-636", "6E-171", "SG-131", "G8-330", "6E-167", "SG-109", "G8-332", "G8-336", "6E-189", "6E-169", "G8-340", "SG-458", "G8-342", "SG-125", "G8-344", "6E-181", "6E-175", "6E-191", "6E-187", "AI-657", "AI-665", "AI-887", "AI-865", "6E-905", "AI-102"]

终端的输出是：

[ 'G8-345',
  '9W-305',
  'AI-633',
  'AI-633',
  'G8-334',
  '6E-183',
  'AI-634',
  'AI-634',
  '6E-171' ]

Answer 1

:nth-child CSS选择器在PhantomJS (1.x)中似乎坏了。对于你的页面来说，你不需要它。只要把它去掉就行了。

$('table.resultUnitMini tbody tr td span span').each(function(){
    flight.push($(this).html());
});

当您遇到这样的问题，并且需要:nth-child和类似的，那么要么使用一些技巧，如table tr + tr td span span用于第二个tr，或者使用XPath，因为它似乎没有被破坏：

var iterator = document.evaluate("//table[contains(@class,'resultUnitMini')]//tr[2]//td//span//span", 
        document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null),
    element = iterator.iterateNext();
while(element){
    // do something with element here
    element = iterator.iterateNext();
}