jQuery从字符串中提取div后，div内容丢失

Question

Update:

I finally figured out why the content of the #output div is empty. It is because that the content is retrieved from server and it takes time to do so, so by the time the document is loaded the content of this div is still empty.

Anyone has idea about extract information from the delayed div content by only using JavaScript or jQuery etc. (client side programming)?

---

I have a variable which stores a very large string and its content is html. let's call it content.

then

var html = $.parseHTML(content);

after this I want to find this chunk (and extract the values from it)

<div id="output" style="float:left;width:150px;margin:30px 0 0 1px;"><div class="result-title">Caltex/Woolworths St Kilda</div><div class="result-text">price: 152.9c<br>address: 99 Chapel St &amp; Inkerman St, St Kilda East</div><div class="result-title">BP East Prahran</div><div class="result-text">price: 152.9c<br>address: 549 High St &amp; Chatsworth Rd, Prahran</div><div class="result-title">BP Balaclava</div><div class="result-text">price: 152.9c<br>address: 308 Carlisle St &amp; Blenheim St, Balaclava</div><div class="result-title">7 Eleven St Kilda</div><div class="result-text">price: 153.9c<br>address: 154-158 St Kilda Rd &amp; Alma Rd, St Kilda</div><div class="result-title">BP AA Prahran</div><div class="result-text">price: 153.9c<br>address: 500 Malvern Rd, Prahran</div></div>

I tried to loop through it but don't know which attribute should be used to find that chunk.

 function onS(data)
           {
               var html = $.parseHTML(data.responseText);
               $.each(html, function (i, ele) {
                   if (ele.nodeName == '#div')
                   {
                       alert('found it!!!');
                   }
               });
               alert("Data Loaded: " + data.responseText);
           }

Please help.

****Update:****

Code:

function onS(data)
           {
               // Niclas
               var nodes = $('#output', data.results[0]);
               alert("Data Loaded: " + nodes.html());

               //Adeneo
               var node = $(data.results[0]).find('div#output'); 
               alert("Data Loaded: " + node.html());
           }

The runtime values (please look at innerHTML), it is empty in both ways.

(the pic looks like too small, you can press Ctrl + mouse wheel to zoom in/out)

Answer 1

It looks like you're using ajax to get the string, and just setting the dataType to html will automatically parse it for you.
To find an element within that data, you use regular DOM traversal methods:

$.ajax({
    url : 'somewhere.php',
    dataType : 'html'
}).done(onS);

function onS(data) {
     var node = $(data).find('#div'); // or filter('#div') for root elements

     alert("Data Loaded: " + node.html());
}

if for some reason you just have to iterate, it looks like you're looking for either the tagName or the id ?

$.each(html, function (i, ele) {
    ele.tagName // returns 'div', 'span' etc. often in uppercase
    ele.id // would return the id, 
           // and from the hashsign it looks like it's what you're trying to do

    ....
});

Answer 2

You don't have to loop through it all. You can use jQuery selectors as usual:

var theNodeYoureLookingFor = $('#output', html);

Here's a silly little fiddle to demonstrate it: http://jsfiddle.net/RjAMw/1/

EDIT: Update in response to question update:

Your onS function takes the fetched data as argument. data is already in HTML format, so all you need to do is:

var $node = $('div#output', data);
alert('Data Loaded: ' + $node.html());

From what I can see, the errors you've been given is because you're trying to access a data.results array, which isn't there.

Answer 3

I finally figured it out.

The reason why the div content is empty is because that #output div will be generated 2-4 seconds later after the html document is loaded. So when the onS() method is triggered the content of that div hasn't been generated.

As to how to retrieve the generated/dynamic/delayed content of a div from a cross domain website, please refer to this question:

how to use JavaScript(jQuery etc.) to get delayed/generated/dynamic content from an external website page