遍歷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>