通过jQuery从字符串中提取div后，div内容丢失答案

【问题标题】：div content is lost after extracting the div from a string by jQuery通过jQuery从字符串中提取div后，div内容丢失
【发布时间】：2013-08-06 15:54:01
【问题描述】：

更新：

我终于弄明白了为什么#output div 的内容是空的。因为内容是从服务器获取的，需要时间，所以到文档加载的时候，这个div的内容还是空的。

有人知道仅使用 JavaScript 或 jQuery 等（客户端编程）从延迟的 div 内容中提取信息吗？

我有一个变量，它存储了一个非常大的字符串，它的内容是 html。我们称之为内容。

然后

var html = $.parseHTML(内容);

之后我想找到这个块（并从中提取值）

<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>

我试图循环遍历它，但不知道应该使用哪个属性来查找该块。

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

请帮忙。

****更新：****

代码：

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

运行时值（请看innerHTML），双向都是空的。

（图片看起来太小了，可以按Ctrl+鼠标滚轮放大/缩小）

【问题讨论】：

那么，您要提取的“值”是其子项的内容吗？所以title 会是Caltex/Woolworths St Kilda？
@NicklasNygren 是的，我想要标题和结果文本 div。标题告诉它在哪里，结果文本告诉价格是多少。谢谢，请看我更新的帖子。谢谢@!!
试试var nodes = $('#output', $.parseHTML(data));
@NicklasNygren 嗨尼克，试过了，innerHTML 还是空的。

标签： javascript jquery query-string

【解决方案1】：

看起来您正在使用 ajax 来获取字符串，只需将 dataType 设置为 html 就会自动为您解析它。
要在该数据中查找元素，请使用常规 DOM 遍历方法：

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

如果由于某种原因您只需要迭代，看起来您正在寻找 tagName 或 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

    ....
});

【讨论】：

嗨 adeneo，非常感谢。第一种方式有效。但我只能得到想要的 div，里面没有内容......请看看我更新的帖子。谢谢！

【解决方案2】：

您不必遍历所有内容。你可以像往常一样使用 jQuery 选择器：

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

这里有一个愚蠢的小小提琴来演示它：http://jsfiddle.net/RjAMw/1/

编辑：针对问题更新进行更新：

您的onS 函数将获取的data 作为参数。 data 已经是 HTML 格式了，所以你需要做的就是：

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

据我所知，您遇到的错误是因为您尝试访问不存在的 data.results 数组。

【讨论】：

您好 Nicklas，您的方法也有效。但它和adeneo的代码有同样的问题。请看我更新的帖子。谢谢。

【解决方案3】：

我终于明白了。

之所以div内容为空，是因为html文档加载后2-4秒后会生成#output div。所以当 onS() 方法被触发时，该 div 的内容还没有生成。

关于如何从跨域网站检索div的生成/动态/延迟内容，请参考这个问题：

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

【讨论】：