遍历ajax响应div并使用jquery将子元素添加到数组中

Question

I have an html document that has many divs with the same class, how do I iterate over each div and add its elements' text to a multidimensional array?

Html:

<div class="testimonial" data-index="1">
    Testimonial 1
    <a href="" class="member-item-link">the link1</a>
    <span class="old-rank">50</span>
    <span class="new-rank">30</span>
</div>
<div class="testimonial" data-index="2">
    Testimonial 2
    <a href="" class="member-item-link">the link2</a>
    <span class="old-rank">50</span>
    <span class="new-rank">30</span>
</div>
<div class="testimonial" data-index="3">
    Testimonial 3
    <a href="" class="member-item-link">the link3</a>
    <span class="old-rank">50</span>
    <span class="new-rank">30</span>
</div>
<div class="testimonial" data-index="4">
    Testimonial 4
    <a href="" class="member-item-link">the link4</a>
    <span class="old-rank">50</span>
    <span class="new-rank">30</span>
</div>
<div class="testimonial" data-index="5">
    Testimonial 5
    <a href="" class="member-item-link">the link5</a>
    <span class="old-rank">50</span>
    <span class="new-rank">30</span>
</div>

The results should be something like this

testimonials = [["the link1",50,30],["the link2",50,30]["the link3",50,30],...,];

I tried something like this but it didn't work (BTW I get the document through an ajax call)

$.get(url, function(data){

var testimonials = [];

$(".testimonial", data).each(function() {


                the_link = $("a.member-item-link").text();
                the_oldrank = $(".old-rank").text();
                the_newrank = $(".new-rank").text();  

                testimonials.push([the_title , the_oldprice , the_newprice]);
                });
});

Answer 1

Your code is along the right lines, but has several problems. Firstly the .testimonial elements are in the root level of the returned HTML, so you'll need to use filter() to retrieve them, as there is no parent element to find from in the contextual selector you originally had.

Secondly, you need to traverse the DOM to find the related elements within the current testimonial. Your current code would have selected them all.

Finally, the variable names you defined did not match those you were putting in the array. Also note that you can make the code simpler by using map() instead of an each() loop. Try this:

 // in this example 'data' is the response from your AJAX request var data = '<div class="testimonial" data-index="1">Testimonial 1<a href="" class="member-item-link">the link1</a><span class="old-rank">50</span><span class="new-rank">30</span></div><div class="testimonial" data-index="2">Testimonial 2<a href="" class="member-item-link">the link2</a><span class="old-rank">50</span><span class="new-rank">30</span></div><div class="testimonial" data-index="3">Testimonial 3<a href="" class="member-item-link">the link3</a><span class="old-rank">50</span><span class="new-rank">30</span></div><div class="testimonial" data-index="4">Testimonial 4<a href="" class="member-item-link">the link4</a><span class="old-rank">50</span><span class="new-rank">30</span></div><div class="testimonial" data-index="5">Testimonial 5<a href="" class="member-item-link">the link5</a><span class="old-rank">50</span><span class="new-rank">30</span></div>'; var testimonials = $(data).filter('.testimonial').map(function() { var the_link = $(this).find("a.member-item-link").text(); var the_oldrank = $(this).find(".old-rank").text(); var the_newrank = $(this).find(".new-rank").text(); return [[the_link, the_oldrank, the_newrank]]; }).get(); console.log(testimonials); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>