Question

I need to get all child div values from the AJAX response which contains the following format.

var jqxhr = $.post('<%= url_for :action => :friend_list %>', { id: fid }, 
    function(data){
        var stripped_data = $(data).html().trim();
        var top_name = $(stripped_data).find('div.toppings_name').html();  
    }); 

In the alert of stripped_data contains the following format.

<div id="toppings>
  <div class="toppings_name">a</div>
  <div class="toppings_name">b</div>
  <div class="toppings_name">c</div>
</div> 

I tried using .find() method but getting the first child value only. How to get all the values from the parent div.

Answer 1

The problem is you’re using html which is meant for use on a single element but actually using it on a collection. Instead you want the html contents of the outer div. Try this instead

var top_name = $(stripped_data).find('#toppings').html();

If you are looking for each of the names in the div list though, try the following

var all = [];
$(stripped_data).find('div.toppings_name').each(function() {
  var name = $(this).text();
  all.push(name);
});