Jquery function returning function code not value

Question

I am iterating over a list nested within a div (.catHOLDER), finding the img tag and trying to return the img src. The problem I have is that the function is returning all of the function source code instead of the string value, but oddly if I alert in the loop it returns the string value;

$(document).ready(function(){
function getnestedimg() {
    $('.catHOLDER ul').children('li').each(function(i,value) { 
            var imgstr = $(value).find('img').attr('src');
            if (imgstr !== undefined) {
                alert(imgstr);
            }
    });
}
getnestedimg();
});

The above code will display an alert with path of the img src, but if I try to return imgstr it returns me the function code instead;

$(document).ready(function(){
function getnestedimg() {
    $('.catHOLDER ul').children('li').each(function(i,value) { 
            var imgstr = $(value).find('img').attr('src');
            if (imgstr !== undefined) {
                return imgstr;
            }
    });
}
getnestedimg();
});

Returns the following;

function getnestedimg() {
                $('.catHOLDER ul').children('li').each(function(i,value) { 
                    var imgstr = $(value).find('img').attr('src');
                        if (imgstr !== undefined) {
                            //alert(imgstr);
                        //ret urn gotya;
                        return imgstr.val();
                        }
                });
            }

Can anyone help me in my plight, or if there is a better way to iterate over the children tags nested with the div?

Martín Valdés de León · Accepted Answer · 2013-01-17 18:53:20Z

1

The return statement inside the getnestedimg function, is acually inside the nested anonymous function you pass to each. That's why it's not returning any value to the caller of getnestedimg. You should store this value in a function variable of getnestedimg, as suggested.

Also, I recommend you read up on closures.

answered Jan 17, 2013 at 18:53

Martín Valdés de León

1,35611 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blender · Accepted Answer · 2013-01-17 18:55:42Z

1

I'd use something like this:

var image_src = $('.catHOLDER ul > li img[src]').first().attr('src');

> li img[src] selects only img tags that have a src attribute and are descendants of li elements. .first() grabs only the first one.

If no elements match those conditions, image_str === undefined.

answered Jan 17, 2013 at 18:55

Blender

300k55 gold badges462 silver badges511 bronze badges

2 Comments

Blender Over a year ago

@JosephSilber: The original code included those as well, but you could exclude them by using [src!=""] as the attribute selector.

user1988149 Over a year ago

Hi Blender, I tried the following, but it sadly didn't work; $(document).ready(function(){ function getnestedimg() { var image_src = $('.catHOLDER ul > li img[src]').first().attr('src'); return image_src; } alert(getnestedimg); });

mikakun · Accepted Answer · 2013-01-17 20:28:30Z

0

   $.fn.extend({
      getsrc : function() {
         return $(this).find(">ul> li img").map(function() {
                   return $(this).attr("src"); 
                   });
             }
    });

   $(document).ready(function() {
        var catHOLDERimgsrc = new Array();
        catHOLDERimgsrc=$(".catHOLDER").getsrc();
        console.log(catHOLDERimgsrc);
   })

but a plugin for this ? i would do it direct :

   $(document).ready(function() {
        var catHOLDERimgsrc = new Array();
        catHOLDERimgsrc=$(".catHOLDER").find(">ul> li img").map(function() {
                   return $(this).attr("src"); 
                   });
        console.log(catHOLDERimgsrc);
   })

imo the nicest way to iterate to get a set of value arranged in an array (that is if you want all the images src otherwise you change selector then if not enough you can do anything inside the map function)

edited Jan 17, 2013 at 20:28

answered Jan 17, 2013 at 19:06

mikakun

2,2832 gold badges18 silver badges25 bronze badges

4 Comments

mikakun Over a year ago

nb since jq1.9 i think attr is getting deprecated and prop should be favoured; although they mentioned some exceptions

Joseph Silber Over a year ago

attr is definitely not being deprecated. Use of attr to get/set properties is what's being deprecated. It's still useful for its intended purpose: getting/setting attributes. Whether the OP wants to get the src attribute or the src property is an different story altogether...

user1988149 Over a year ago

Hi Mikakun, I tried the following and it didn't work, it still returned the function code; $(document).ready(function(){ function getnestedimg() { var catholderimages=new Array(); catholderimages=$('.catHOLDER').find('> ul >li > img').map(function() { return $(this).attr("src"); }); } alert(getnestedimg); });

mikakun Over a year ago

no you don't need to make a function of it you just put it in your doc.ready anonymous function & then you get your array catholderimages containing all your src in the same order than the dom - i'll edit answer if you do want a separate function

Collectives™ on Stack Overflow

Jquery function returning function code not value

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related