Question

为什么我会为同一个jQuery选择器获得不同的结果？

网站：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

node.js / phantomjs-node（网桥）代码：

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();
}

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

1 个答案: