如何使用jquery解析html數據？

-1

我無法使用此破損的代碼從HTML中提取數據。有誰能告訴我它有什麼問題嗎？這裏是jsfiddle中的例子。 http://jsfiddle.net/AjM7u/3/如何使用jquery解析html數據？

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

來源

2013-07-31 user1788736

IMG沒有標籤不 –

'HREF'爲一體，是永遠不會被中定義的href參數'data.push（）' – Izkata

1）您在data.push

錯過HREF 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-31 18:11:12 Praveen

感謝所有回覆。現在href已經固定，但位置和價格和季節和縮略圖標籤和主題都是空的！我如何解決它們？ – user1788736

請看我更新的答案。 – Praveen

偷我的答案... – Pete

 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-31 18:07:37

HREF行後缺少逗號 – gibberish

什麼你錯過的是圖像的父是錨標籤。你想要的是：

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-31 18:18:41 Pete

也是不正確的在許多您的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-31 18:44:56 gibberish

回答

相關問題