在 jQuery 中提取部分 HTML 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2137811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extract part of HTML document in jQuery
提问by Craig Walker
I want to make an AJAX call to an HTML-returning page, extract part of the HTML (using jQuery selectors), and then use that part in my jQuery-based JavaScript.
我想对返回 HTML 的页面进行 AJAX 调用，提取部分 HTML（使用 jQuery 选择器），然后在基于 jQuery 的 JavaScript 中使用该部分。
The AJAX retrievalis pretty simple. This gives me the entire HTML document in the "data" parameter of the callback function.
在AJAX检索是非常简单的。这在回调函数的“数据”参数中为我提供了整个 HTML 文档。
What I don't understand is how to handle that data in a useful way. I'd like to wrap it in a new jQuery object and then use a selector (via find() I believe) to get just the part I want. Once I have that I'll be passing it off to another JavaScript object for insertion into my document. (This delegation is why I'm not using jQuery.load() in the first place).
我不明白的是如何以有用的方式处理这些数据。我想将它包装在一个新的 jQuery 对象中，然后使用选择器（我相信通过 find()）来获取我想要的部分。一旦我有了它，我会将它传递给另一个 JavaScript 对象以插入到我的文档中。（这个委托就是我不首先使用 jQuery.load() 的原因）。
The get() examples I see all seem to be variations on this:
我看到的 get() 示例似乎都是对此的变体：
$('.result').html(data);
...which, if I understand it correctly, inserts the entirereturned document into the selected element. Not only is that suspicious (doesn't this insert the <head>etc?) but it's too coarse for what I want.
...如果我理解正确，它将整个返回的文档插入到所选元素中。这不仅是可疑的（这不是插入<head>等吗？）而且它对于我想要的来说太粗糙了。
Suggestions on alternate ways to do this are most welcome.
非常欢迎有关替代方法的建议。
回答by Sampson
You can use your standard selector syntax, and pass in the dataas the context for the selector. The second parameter, datain this case, is our context.
您可以使用标准选择器语法，并将 传递data为选择器的上下文。data在这种情况下，第二个参数是我们的上下文。
$.post("getstuff.php", function(data){
var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
This is equivalent to doing:
这相当于做：
$(data).find("#mainDiv");
Depending on how you're planning on using this, $.load()may be a better route to take, as it allows both a URL and a selector to filter the resulting data, which is passed directly into the element the method was called on:
根据您计划如何使用它，$.load()可能是更好的选择，因为它允许 URL 和选择器过滤结果数据，这些数据直接传递到调用方法的元素中：
$("#mylocaldiv").load("getstuff.php #mainDiv");
This would load the contents of <div id='mainDiv'>...</div>in getstuff.phpinto our local page element <div id='mylocaldiv'>...</div>.
这会将<div id='mainDiv'>...</div>in的内容加载getstuff.php到我们的本地页面元素中<div id='mylocaldiv'>...</div>。
回答by icktoofay
You could create a divand then put the HTML in that, like this…
您可以创建一个div，然后将 HTML 放入其中，就像这样......
var div = $("<div>").html(data);
...and then filter the data like this…
...然后像这样过滤数据...
var content = $("#content", div.get(0));
…and then use that.
......然后使用它。
This may look dangerous as you're creating an element and putting arbitrary HTML into it, but it's not: anything dangerous (like a scripttag) will only be executed when it's inserted into the document. Here, we insert the data into an element, but that element is never put into the document; only if we insert contentinto the document would anything be inserted, and even then, only anything in contentwould be inserted.
当您创建一个元素并将任意 HTML 放入其中时，这可能看起来很危险，但事实并非如此：任何危险的东西（如script标签）只会在插入到文档中时才会执行。在这里，我们将数据插入到一个元素中，但该元素永远不会放入文档中；只有当我们插入content文档时才会插入任何内容，即使这样，也只会content插入任何内容。
回答by Kobi
You can use loadon a new element, and pass that to a function:
您可以load在新元素上使用，并将其传递给函数：
function handle(element){
$(element).appendTo('body');
}
$(function(){
var div = $('<div/>');
div.load('/help a', function(){handle(div);});
});
Example: http://jsbin.com/ubeyu/2
回答by Peter Loron
You may want to look at the dataFilter()parameter of the $.ajaxmethod. It lets you do operations on the results before they are passed out.
您可能想查看dataFilter()该$.ajax方法的参数。它允许您在结果传递之前对结果进行操作。
回答by Mithu A Quayium
You can do the thing this way
你可以这样做
$.get(
url,
{
data : data
},
function (response) {
var page_content = $('.page-content',response).get(0);
console.log(page_content);
}
)
Here in the console.log you will see the inner HTML of the expected/desired portion from the response. Then you can use it as your wish
在 console.log 中，您将看到响应中预期/所需部分的内部 HTML。然后你可以随意使用它
