在jQuery中提取部分HTML文档

Cra*_*ker 32 ajax jquery

我想对HTML返回页面进行AJAX调用,提取部分HTML(使用jQuery选择器),然后在基于jQuery的JavaScript中使用该部分.

AJAX检索是非常简单的.这给了我回调函数的"data"参数中的整个HTML文档.

我不明白的是如何以有用的方式处理这些数据.我想将它包装在一个新的jQuery对象中,然后使用一个选择器(通过我相信的find())来获得我想要的部分.一旦我有了,我将把它传递给另一个JavaScript对象以插入我的文档.(这个委托就是为什么我首先不使用jQuery.load()).

我看到的get()示例似乎都是对此的变体:

$('.result').html(data);
Run Code Online (Sandbox Code Playgroud)

...如果我理解正确的话,将整个返回的文档插入到选定的元素中.这不仅是可疑的(这不是插入<head>等等吗?)但它太粗糙了我想要的东西.

关于替代方法的建议是非常受欢迎的.

Sam*_*son 48

您可以使用标准选择器语法,并将其data作为选择器的上下文传递.data在这种情况下,第二个参数是我们的上下文.

$.post("getstuff.php", function(data){
  var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
Run Code Online (Sandbox Code Playgroud)

这相当于:

$(data).find("#mainDiv");
Run Code Online (Sandbox Code Playgroud)

根据您计划如何使用它,$.load()可能是一个更好的路径,因为它允许URL和选择器过滤结果数据,这些数据直接传递给调用该方法的元素:

$("#mylocaldiv").load("getstuff.php #mainDiv");
Run Code Online (Sandbox Code Playgroud)

这会将<div id='mainDiv'>...</div>in 的内容加载getstuff.php到我们的本地页面元素中<div id='mylocaldiv'>...</div>.


Kob*_*obi 5

您可以使用load新元素,并将其传递给函数:

function handle(element){
  $(element).appendTo('body');
}

$(function(){
  var div = $('<div/>');
  div.load('/help a', function(){handle(div);});
});
Run Code Online (Sandbox Code Playgroud)

示例: http: //jsbin.com/ubeyu/2


ick*_*fay 5

您可以创建一个div然后将HTML放入其中,就像这样......

var div = $("<div>").html(data);
Run Code Online (Sandbox Code Playgroud)

...然后像这样过滤数据......

var content = $("#content", div.get(0));
Run Code Online (Sandbox Code Playgroud)

......然后使用它.

这可能看起来很危险,因为您正在创建一个元素并将任意HTML放入其中,但事实并非如此:任何危险(如script标记)只会在插入文档时执行.在这里,我们将数据插入到元素中,但该元素永远不会放入文档中; 只有当我们插入content到文档中时才会插入任何内容,即使这样,也只会content插入任何内容.