-1

我无法使用这个损坏的代码从 html 中提取数据。谁能告诉我它有什么问题？这是 jsfiddle 中的示例。http://jsfiddle.net/AjM7u/3/

var data = [];

var htmlData = '<li>';
htmlData += '    <a href="/mango/" >';
htmlData += '    <img src="./season/123434mango.jpg" width="180" height="148"';
htmlData += '         alt="mango season" class="png"></a>';
htmlData += '';
htmlData += '    ';
htmlData += '        <div class="thumbnail_label">ok</div>';
htmlData += '    ';
htmlData += '';
htmlData += '  <div class="details">';
htmlData += '    <div class="title">';
htmlData += '      <a  href=';
htmlData += '      "/mango/"> mango</a>';
htmlData += '      <span class="season">2</span>';
htmlData += '    </div>';
htmlData += '    <ul class="subject">';
htmlData += '      <li>read</li>';
htmlData += '    </ul>';
htmlData += '    <ul class="sub-info">';
htmlData += '      <li class="location">Europe</li>';
htmlData += '      <li class="price">2</li>';
htmlData += '    </ul>';
htmlData += '  </div>';
htmlData += '</li>';

console.log($.parseHTML(htmlData));

$($.parseHTML(htmlData)).each(function() {
    $(this).find("img").each(function() {
        var parent = $(this).parent();
        data.push({
            SRC: $(this).attr("src"),
            HREF: parent.find("a").attr("href"),
            LOCATION: parent.find(".location").text(),
            price: parent.find(".price").text(),
            season: parent.find(".season").text(),
            thumbnail: parent.find(".thumbnail_label").text(),
            SUBJECT: parent.find(".subject li").text()
        });
    });
});

function outputData() {
    var html = "";
    for(var i = 0; i < data.length; i++) {
        html += "SRC: " + data[i].SRC;
        html += "<br/>HREF: " + data[i].HREF;
        html += "<br/>LOCATION: " + data[i].LOCATION;
        html += "<br/>PRICE: " + data[i].price;
        html += "<br/>season: " + data[i].season;
        html += "<br/>thumbnail: " + data[i].thumbnail;
        html += "<br/>SUBJECT: " + data[i].SUBJECT;
        html += "<br/><br/>";

    }

    return html;
}

$("#output").html(outputData());

输出：

SRC: ./season/123434mango.jpg
HREF: undefined
LOCATION:
PRICE:
season:
thumbnail:
SUBJECT:

预期输出：

SRC: ./season/123434mango.jpg
HREF: /mango/
LOCATION:Europe
PRICE:2
season:2
thumbnail:ok
SUBJECT: read
4

4 回答 4

1

1) 你错过HREF了data.push

2）parent（你的变量）只引用标签，所以.find()在这里失败

var parent = $(this).parent();
parent.parent().find(".location")  // fails eventually

因此应该是parent.parent()

data.push({
            SRC: $(this).attr("src"),
            HREF: parent.attr("href"), //missed to add it
            LOCATION: parent.parent().find(".location").text(),
            price: parent.parent().find(".price").text(),
            season: parent.parent().find(".season").text(),
            thumbnail: parent.parent().find(".thumbnail_label").text(),
            SUBJECT: parent.parent().find(".subject li").text()
        });

JSFiddle

于 2013-07-31T18:11:12.657 回答
1

您错过的是图像的父级是锚标记。你想要的是：

var parent = $(this).parent().parent();

然后其余的将就位。显然，正如其他海报所提到的，您还需要缺少的 href 部分：

data.push({
        SRC: $(this).attr("src"),
        HREF: parent.attr("href"),  // you missed to add this 
        LOCATION: parent.find(".location").text(),
        price: parent.find(".price").text(),
        season: parent.find(".season").text(),
        thumbnail: parent.find(".thumbnail_label").text(),
        SUBJECT: parent.find(".subject li").text()
    });
于 2013-07-31T18:18:41.673 回答
0 
        SRC: $(this).attr("src"),
        HREF: $(this).parent().attr("href")
        LOCATION: parent.find(".location").text(),
        price: parent.find(".price").text(),
        season: parent.find(".season").text(),
        thumbnail: parent.find(".thumbnail_label").text(),
        SUBJECT: parent.find(".subject li").text()
于 2013-07-31T18:07:37.103 回答
0

您在许多 jQuery 遍历方法中也是不正确的。parseHTML 例程应如下所示：

$($.parseHTML(htmlData)).each(function() {
    $(this).find("img").each(function() {
        var parent = $(this).parent();
        data.push({
            SRC: $(this).attr("src"),
            HREF: parent.attr("href"),
            LOCATION: parent.parent().find("div").next().closest('ul').next().find('.location').text(),
            PRICE: parent.parent().find("div").next().closest('ul').next().find('.price').text(),
            season: parent.parent().find("div").next().find('span').text(),
            thumbnail: parent.parent().find("div").html(),
            SUBJECT: parent.parent().find("div").next().closest('ul').find('li').text()
        }); //END .push
    }); //END .find("img")
}); //END .parseHTML

这是一个更正的 jsFiddle：http: //jsfiddle.net/AjM7u/11/

于 2013-07-31T18:44:56.777 回答