2

I want to loop thru a file which is loaded with ajax, but it won't loop, i have tried a couple of things but I cant get it to work.

// jquery

$.ajax({
    url: 'file.html',
    type: "GET",
    dataType: "html",
    success: function(data) {

        $(data).find('div').each(function(i){
            alert('found')
        });

    },
    error: function(){
        alert('oeps...')
    }                           
});

// file.html

<div>
// content goes here
</div>

<div>
// content goes here
</div>

<div>
// content goes here
</div>

...


...    
2
  • Any errors in console? If what Starx advised didn't help would be good to have jsfiddle demo to check it.
    – Kane Cohen
    May 14, 2012 at 19:21
  • no i dont get any error, would be nice do, than i know where to look ;)
    – user759235
    May 14, 2012 at 19:27

5 Answers 5

2

You need to change .find to .filter. This is because .find searches the children descendants of all the elements, but since your html file is just <div>s, you need to use .filter to find them.

DEMO: http://jsfiddle.net/zuPVp/

3
  • Yes you are right, find is to search childrens, how stupid of me. Thanks!!
    – user759235
    May 14, 2012 at 19:38
  • Technically speaking it searches all descendants, not only children, so children of children too. May 14, 2012 at 19:46
  • @Interstellar_Coder: True :-P
    – gen_Eric
    May 14, 2012 at 19:51
1

You dont need to specify html as the datatype, it is not needed.

SO, remove the following line.

dataType: "html"
4
  • That's perfectly valid, in fact, you should use it if you're returning HTML.
    – gen_Eric
    May 14, 2012 at 19:27
  • If you remove the dataType it will not work, as at default the dataType will try to gues what it is.
    – user759235
    May 14, 2012 at 20:02
  • @user759235, Actually No, when you pass the data as $(data) it will immediately become a jQuery Object.
    – Starx
    May 14, 2012 at 20:58
  • hmmm okay, but still, when i remove it, it will not run
    – user759235
    May 14, 2012 at 21:36
1

The reason that doesn't work is because .find looks for descendants in data, all of those divs are at the root.

You can create an empty div then set the html of that div to your data. This will ensure find works as the divs will then be descendants.

$.ajax({
    url: 'file.html',
    type: "GET"
    success: function(data) {
        $('<div/>').html(data).each(function(index, item) {
            console.log(item);
        });
    },
    error: function(){
        console.log('error')
    }                           
});

Or you could use filter.

$.ajax({
        url: 'file.html',
        type: "GET"
        success: function(data) {
            $(data).filter('div').each(function(index, item) {
                console.log(item);
            });
        },
        error: function(){
            console.log('error')
        }                           
    });
0

It's hard to know what you are trying to do, but I'm guessing it's this:

$.ajax({
    url: 'file.html',
    type: "GET"
    success: function(data) {
        $.each($('div', data.outerHTML), function(index, item) {
            console.log(item);
        });
    },
    error: function(){
        console.log('error')
    }                           
});
2
  • $('div', data) is exactly the same as $(data).find('div').
    – gen_Eric
    May 14, 2012 at 19:32
  • @Rocket - ooops, forgot something!
    – adeneo
    May 14, 2012 at 19:37
0

In this case, .find() does not work because the HTML you are searching does not contain any div children nodes. To fix this, first append the items to some container and then use .find().

http://jsfiddle.net/jbabey/hvkw9/1/

var html = $('<div>first div</div><br /><div>second div</div>');

// 0, no child divs in html
console.log(html.find('div').length);
// 2, now the divs in html are children of an intermediate div
console.log($('<div>').append(html).find('div').length);
1
  • 1
    That's incorrect, find doesn't work because they are not descendants, not because they are not in the DOM. May 14, 2012 at 19:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.