CODEWITHSUNDEEP
javascriptjqueryhtmlajax
David Rhoderick
David Rhoderick

Reputation: 352

jQuery.find() doesn't work inside html variable

I have a very simple problem and keep finding answers to similar questions with more complexity. I am trying to replace image links in loaded html and decided that the best is to read the html into a string variable loadedHTML using .get(), like this:

$.get(loadURL, function(loadedHTML) {
    myFunction(loadedHTML);
}, 'html');

In myFunction, I want to make some changes to the loaded html and eventually return it. I can't get .find() to work. Here is what that code looks like:

function myFunction( html ) {
    var $html = $("<div>" + html + "</div>");
    console.log( "$html.html() = " + $html.html()); // works!
    $html.find("img", function() {
        console.log("found an image"); // doesn't work :(
    });
}

I am killing myself with something that is probably really simply. Let me know how I am dumb please...

Upvotes: 0

Views: 1745

Answers (6)

Wilmer
Wilmer

Reputation: 2511

jQuery.find() doesn't have a callback but you can extend jQuery to do what you want:

jQuery.fn.extend({
    findEach: function (selector, callback) {
        var found = this.find(selector);

        if (typeof callback == 'function' && found.length > 0) {
            found.each(callback);
        }
        return found;
    }
});

Then use like you expect:

$html.findEach("img", function(key, value) {//will run for each image
    console.log(key);
    console.log(value);
    console.log(this);
});

Upvotes: 0

Pramod S. Nikam
Pramod S. Nikam

Reputation: 4549

Simply assign id to your div tag .

like below,

 var $html = $("<div id='placeholder'>" + html + "</div>");

and find img with it like below,

$("#placeholder").find("img", function() {
    console.log("found an image"); // doesn't work :(
});

your resultant code,

function myFunction( html ) {
var $html = $("<div id='placeholder'>" + html + "</div>");
console.log( "$html.html() = " + $html.html()); // works!
$("#placeholder").find("img", function() {
    console.log("found an image"); // doesn't work :(
});

}

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use this .filter():

var found = $html.find("img").filter(function() {
    return this;
});
console.log(found);

or make an array out of it with .map():

var found = $html.find("img").map(function() {
    return this;
}).get(); // use get() method here to get the values in array
console.log(found.length); // would give you the length of array created.

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

.find() didn't have callback function in jquery. it have parameter for selectors,elements,jqueryObject only.you have to check with length or condition like this

if($html.find("img").length > 0){

      // do stuff here
}

or

  if($html.has("img")){

       // do stuff here
   }

Upvotes: 0

Getz
Getz

Reputation: 4063

The find method doesn't have a second parameter:

http://api.jquery.com/find/

You should try this:

function myFunction( html ) {
    var $html = $("<div>" + html + "</div>");
    console.log( "$html.html() = " + $html.html()); // works!
    console.log($html.find("img"));
}

Upvotes: 1

Ian Devlin
Ian Devlin

Reputation: 18880

I'm almost sure that you cannot use find in the way that you have.

Try something like:

var $foundImages = $html.find("img");
console.log($foundImages.length);

Which would, in theory, output the number of images that were found.

Upvotes: 3

Related Questions