javascript - How to parse html data using jquery? -

i have trouble using broken code extract data html . 1 tell me wrong it? here example in 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 = 0; < 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()); 

output:

src: ./season/123434mango.jpg href: undefined location: price: season: thumbnail: subject:  

expected output:

src: ./season/123434mango.jpg href: /mango/ location:europe price:2 season:2 thumbnail:ok subject: read 

1) missed href in data.push

2) parent(your variable) refers tag only, .find() fails here

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

therefore should parent.parent()

data.push({             src: $(this).attr("src"),             href: parent.attr("href"), //missed add             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