Question

更新

我终于弄清楚为什么#output div的内容为空。这是因为内容是从服务器检索的，这需要时间，所以当文档加载时，这个div的内容仍然是空的。

任何人都只想通过使用JavaScript或jQuery等从延迟的div内容中提取信息（客户端编程）？

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

然后

var html = $ .parseHTML（content）;

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

<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 +鼠标滚轮来放大/缩小）

enter image description here

Answer 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

    ....
});

Answer 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数组，而不是那里。

Answer 3

我终于明白了。

div内容为空的原因是因为#output div将在加载html文档后2-4秒生成。因此，当触发onS（）方法时，尚未生成该div的内容。

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

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

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

3 个答案: