I have this piece of 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

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:

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

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

I have this piece of 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

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:

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

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

• javascript
• jquery
• ajax
• filter

• I don't think IDs starting with a number are valid – ThiefMaster Commented May 5, 2011 at 12:57

3 Answers 3

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 filter instead of find, so you should have:

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

instead of

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

Also W3C recommends not to have numeric IDs.

EDIT 2: This should work:

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

Hope this helps. Cheers

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

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.

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

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

This works for me :

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