使用 jquery 访问 ajax html 响应的元素答案

【问题标题】：Accessing elements of ajax html response with jquery使用 jquery 访问 ajax html 响应的元素
【发布时间】：2012-05-05 08:17:12
【问题描述】：

我在访问 ajax 请求的 html 响应的元素时遇到问题。我正在使用 jquery，并尝试尽可能简化问题：

我有一个这样的 ajax html 响应（保持非常简单）：

<div id="div_1"><span id="span">Text in Span</span></div>
<div id="div_2">Text in div</div>

现在我正在尝试使用 jquery 访问此 html 响应的某些元素：

 $.ajaxSetup(
 {
   success: function(html)
   {
    alert($('#span', html).html()); //works fine
    alert($('#div_1', html).html()); // doesn't work, why?
    alert($('#div_2', html).html()); // also doesn't work
    alert( $('span', html).first().attr('id') ); // works fine
   }
 }

我实际上想获取第一个 div 元素的 id，但我似乎无法访问 html 响应的第一个“级别”。我可能可以使用包含其他所有内容的 div 围绕容器来解决问题。

是否有另一种解决方案或者有人可以解释一下，为什么 jquery 似乎忽略了 html 的第一级？

非常感谢你，对不起我的英语（我不是母语人士）幻影

【问题讨论】：

标签： jquery ajax html-parsing

【解决方案1】：

像这样将 hast 标签添加到 div 中：#div_1 因为它是一个 id。

【讨论】：

对不起，我刚刚在示例中犯了这个错误-即使添加了哈希也会出现问题。我更正了这个例子。

【解决方案2】：

您应该为id 选择器添加哈希：

 $.ajaxSetup(
 {
   success: function(html)
   {
    alert($('#span', html).html()); 
    alert($('#div_1', html).html());  
    alert($('#div_2', html).html()); 
    alert( $('span', html).first().attr('id') ); 
   }
 }

【讨论】：

对不起，我刚刚在示例中犯了这个错误-即使添加了哈希也会出现问题。我更正了这个例子。

【解决方案3】：

尝试将响应包装到div，将其放入变量中，然后使用find() 从响应中获取您需要的元素。

希望，这会有所帮助。

【讨论】：

你不需要添加任何标记；只需将响应包装在 jQuery 中，$(html) 将解析 HTML 并允许对其进行搜索/更新。
alert($('<div>first</div><div>second</div>').find('div:first').html()); 试试看。
alert($('<div><div>first</div><div>second</div></div>').find('div:first').html()); 并在您的控制台中尝试这个。
另外，你可以试试这个...alert($('<div id="first">first</div><div>second</div></div>').find('div#first').html());所以... :)
对此表示赞同。包装是相关的，因为为 jQuery 提供上下文等同于$(context).find(...)，这意味着只会搜索子节点。包装不是为了使 HTML jQuery 可搜索，而是为了使指定的选择器找到预期的元素。