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?

Answer 1

   $.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)