Jquery/javascript,从 ajax 响应中过滤 html 对象

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5898011/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:25:16  来源:igfitidea点击:

Jquery/javascript, filtering html object from ajax response

javascriptjqueryajaxfilter

提问by rjm

I have this piece of html:

我有这段 html:

<div id="1">
  <div class="text">
     Text for div 2 
  </div>
<img src="images/image1.jpg"></img>
</div>

<div id="2">
  <div class="text">
    Text in div 2
  </div>
  <img src="images/image2.jpg"></img>
</div>

Which I grab with a simple .ajax-call

我用一个简单的 .ajax 调用抓住了它

var html = $.ajax({
         url: "htmlsnippet.html",
         cache: false,
         async: false,
         dataType: "html"
         }).responseText;

If I filter it with:

如果我过滤它:

var htmlFiltered = $(html).filter("#1");

it works just fine, I get the whole div with id="1",
but if I use:

它工作得很好,我得到了 id="1" 的整个 div,
但如果我使用:

var htmlFiltered = $(html).filter("#1 .text");

the htmlFiltered variable is an empty object. I can't figure out what I'm doing wrong.

htmlFiltered 变量是一个空对象。我无法弄清楚我做错了什么。

回答by Edgar Villegas Alvarado

You should store it this way:

你应该这样存储:

$.ajax({
   url: "htmlsnippet.html",
   cache: false,
   async: false,
   dataType: "html",
   success: function(data){
      html = data;
   }
}

EDIT: Your way of obtaining html works, but it's not recommended.
You can't grab your last element because you're using filterinstead of find, so you should have:

编辑:您获取 html 的方式有效,但不建议这样做。
您无法获取最后一个元素,因为您使用的是filter而不是find,因此您应该:

var htmlFiltered = $(html).find("#1 .text");

instead of

代替

var htmlFiltered = $(html).filter("#1 .text");

Also W3C recommends not to have numeric IDs.

W3C 还建议不要使用数字 ID。

EDIT 2: This should work:

编辑 2:这应该有效:

var htmlFiltered = $(html).filter("#1").find(".text");

Hope this helps. Cheers

希望这可以帮助。干杯

回答by Volker Rose

If you don't need any special functionality given by the full $.ajaxmethod, you should give $.load()a try:

如果您不需要完整$.ajax方法提供的任何特殊功能,您应该$.load()尝试一下:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

.load() 方法与 $.get() 不同,它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符,则字符串中第一个空格后面的部分将被假定为 jQuery 选择器,用于确定要加载的内容。

$('#result').load('ajax/test.html #container');

http://api.jquery.com/load/#loading-page-fragments

http://api.jquery.com/load/#loading-page-fragments

回答by Fedir RYKHTIK

This works for me :

这对我有用:

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}