使用jQuery從ajax請求中移動返回的數據

Question

我正在從頁面加載一些信息。 我想移動一些內容，然后按正確的順序將其加載到div中。 這就是我的意思。 想象一下，這是頁面上被調用的內容：

<div class="wrapper">
  <div class="product">some text 
    <div class="item" id="234"></div>

    <div class="description>More text</div>
  </div>

  <div class="product">some text 
    <div class="item" id="3343"></div>

    <div class="description">More text</div>
  </div>

</div>

這些只是顯示兩種產品，但可以想象它是30種左右的產品。 現在，當我使用ajax調用加載頁面時，我想在將其放入div之前重新安排一些內容。 我的新內容應如下所示：

<div class="wrapper">
  <div class="product">some text 

    <div class="description>More text 
      <div class="item" id="234"></div>
    </div>
  </div>

  <div class="product">some text

    <div class="description">More text
      <div class="item" id="3343"></div>
    </div>
  </div>

</div>

因此，我選擇了“ item”類並將其移至description類。 如何為所有產品做到這一點？ 我猜是這樣的：

$.get('/product-page',function(data){
  $('#container').html($(data).MOVE-STUFF-AROUND);
});

Answer 1

很難從顯示的內容中分辨出您實際得到的響應。 假設它是完整的wrapper請執行以下操作：

$.get('/product-page',function(data){
    var $data = $(data);
    $data.find('.description').append(function() {
      return $(this).prev('.item');
    });
    $('#container').html($data);
});

演示

Answer 2

鑒於此HTMl：

<div class="wrapper">

  <div class="product">some text     
    <div class="item" id="1111"></div>
    <div class="description">More text</div>    
  </div>                
  <div class="product">some text     
    <div class="item" id="2222"></div>
    <div class="description">More text</div>    
  </div>

</div>

運行此JQuery代碼：

 $(".product").each(function(i, obj) {
           let $prodcut =  $(this);
           let $item = $prodcut.children(".item");
           let $desc = $prodcut.children(".description");
           $item.appendTo($desc);
});

將為您提供以下輸出：

<div class="wrapper">

    <div class="product">some text             
      <div class="description">More text
        <div class="item" id="1111"></div>
     </div>   
    </div>          

  <div class="product">some text             
    <div class="description">More text
      <div class="item" id="2222"></div>
    </div>    
  </div>    

</div>

工作方式：我選擇所有產品div。 我進入每個循環並選擇div標簽的“ item ”，然后移動該div並將其附加到div標簽的“ description ”中。 item和description都是product 。

演示：

 $(".product").each(function(i, obj) { let $prodcut = $(this); let $item = $prodcut.children(".item"); let $desc = $prodcut.children(".description"); $item.appendTo($desc); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <div class="wrapper"> <div class="product">some text <div class="item" id="1111"></div> <div class="description">More text</div> </div> <div class="product">some text <div class="item" id="2222"></div> <div class="description">More text</div> </div> </div> 

Answer 3

我假設/product-page返回HTML，因為您建議使用$('#container').html(data);來顯示它$('#container').html(data); 。 如果是這樣，您可以在后端腳本（產品頁面）中排列HTML，以便在AJAX上調用HTML數據時就可以使用了。

或者，您可以選擇/product-page返回JSON數據，然后將其安排在您的JS代碼中，例如：

$.get('/product-page', function(data) {
    $('.wrapper').html(''); // assuming you want to clear contents of .wrapper
    $.each(data, function (v) {
        var html = '<div class="product>"' + v.some_text;
        html += '<div class="description"'> + v.more_text;
        html += '<div class="item">' + v.item_details + '</div>';
        html += '</div>';
        html += '</div>';
        $('.wrapper').append(html);
    });
});

編輯：在我可以提交我的答案之前，已經添加了注釋，並且意識到上面將無法回答OP，因為AJAX端點來自第三方。

如果數據來自第三方，則需要根據需要創建DOM操作器函數。 可悲的是，構造取決於您的需求。