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

Question

我有一个HTML文档，其中的许多div具有相同的类，如何遍历每个div并将其元素的文本添加到多维数组中？

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>

结果应该是这样的

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

我尝试过类似的操作，但是没有用（顺便说一句，我通过ajax调用获取了文档）

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

您的代码是正确的，但是有几个问题。 首先， .testimonial元素位于返回的HTML的根目录中，因此，您需要使用filter()来检索它们，因为在最初具有的上下文选择器中找不到父元素。

其次，您需要遍历DOM才能找到当前推荐书中的相关元素。 您当前的代码将全部选中。

最后，您定义的变量名称与您放入数组中的变量名称不匹配。 还要注意，通过使用map()而不是each()循环，可以使代码更简单。 尝试这个：

 // 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>