ajaxレスポンスdivを繰り返し、jqueryで配列に子要素を追加する

Question

同じクラスのdivが多数あるhtmlドキュメントがあります。各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()を検索する必要があります。

第2に、現在の証言の中で関連する要素を見つけるためにDOMをトラバースする必要があります。あなたの現在のコードはそれらをすべて選択していました。

最後に、定義した変数名が、配列に入れた変数名と一致しませんでした。 each()ループの代わりにmap()を使用すると、コードを簡単にすることができます。これを試してみてください：

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