Question

I have appended new elements in an empty “ul” but when I try to access newly appended element from jQuery but its undefined. I am designer so don’t get what’s going on. I created a simpler version at: jsfiddle.

1. I am pulling data from another div and put into list items and final add append it to ul.thumbs —- This works great and I can see every thing inside the target ul.

2. I tried to get li:first-child a’s class name from ul.thumbs but did not succeed. It says its undefined … while I can see it inside the ul.thumbs.

   $(document).ready(function () {
   var catName;
   var thumbLi="";
   
   $("#cat-nav li a").each(function(){        
       catName = $(this).html();
   
       $("#portdata li").each(function () {
           itemCat =  $(this).attr("class");
   
           if(catName==itemCat){
               itemCat = $(".thumb", this).html();
                   thumbLi += "<li>" + itemCat + "</li>";
           }
       });
       $(thumbLi).appendTo("div.box2 ul.thumbs");        
   });
   
   var firstOne = $(".thumbs li:first-child a").attr("class");
   alert(firstOne);/*Why is it undefined*/
   

   });

Answer 1

var firstOne = $(".thumbs li:first-child a").attr("class");

You are setting the class attribute of the selector into firstOne, and that selector has no class attached to it.

this fiddle works and will alert the class of the A tag of the first li inside .thumbs

Perhaps you meant to alert the element itself and not its class?