javascript - Filtering AJAX returned data and performing .each on selected elements within -

lets have 4 tabs within nothing in them until clicked (lazy load concept).

when:

tab1 clicked: data inserted tab via ajax.

tab2 clicked: data inserted tab via ajax.

etc.

the data that's being returned consists of:

<ul class="elements">   <li>     <div>stuff</div>     <ul class="comments">       ...initially empty     </ul>   </li> </ul> 

now in success function i'm calling function gets comments associated li children of parent ul.elements , i'm having trouble.

so after elements loaded tab, have function needs doctoring:

function loadcomments(data) {   $newdata = $(data).filter('ul.elements');   $newdata.find('ul.comments').each(function() {     var commentshome = $(this);  $.ajax({   url: '/myfeed.aspx',   type: 'post',   datatype: 'html',   data: {     "xfd" : "getcomments',   },   success: function(data) {     commentshome.html(data);   } });   }); } 

so far variable commentshome doesn't seem working. goal here load comments each returned element of new data only. when tab2 clicked, function performed on data returned after clicking on tab2.

not sure i'm doing wrong :(

thank you!

the commentshome variable won't available in ajax success function.

however, can create hidden <input type="hidden" id="commentshome" /> , store value in there, reference in ajax success function.

function loadcomments(data) {   $newdata = $(data).filter('ul.elements');   $newdata.find('ul.comments').each(function() {     $('#commentshome').val($(this));   $.ajax({   url: '/myfeed.aspx',   type: 'post',   datatype: 'html',   data: {     "xfd" : "getcomments',   },   success: function(data) {     var commentshome = $('#commentshome).val();     commentshome.html(data);   } });