Moving returned data around from an ajax request with jQuery

Question

I'm loading some information from a page. I want to move some of the content around and then load it up to a div in the corrected order. Here's what I mean. Imagine this is the content on the page being called:

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

These are just showing two products, but imagine it's 30 or so products. Now when I load the page using an ajax call, I want to re-arrange some of the content before I place it in a div. My new content should look like this:

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

So I took the "item" class and moved it into the description class. How do I accomplish this for all the products? It would look something like this I suppose:

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

Answer 1

Hard to tell from what is shown what you actually get as response. Assuming it is the full wrapper do:

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

DEMO

Answer 2

Given this 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>

Running this JQuery code:

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

Will give you this output:

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

The way it works: I select all prodcuts divs. I loop into each one and select the div labled " item " and then I move that div and append it into a div labled " description ". Both item and description are children of product .

DEMO:

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

I presume /product-page returns HTML since you suggest displaying it using $('#container').html(data); . If so, you can arrange your HTML in the backend script (product-page) so when you call it on AJAX, the HTML data is ready.

Or, you can opt /product-page to return JSON data, then arrange it in your JS code, eg:

$.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);
    });
});

EDIT: Comments were already added before I could submit my answer, and realized above won't answer the OP, as AJAX endpoint comes from third party.

If the data comes from a third party, you need to create a DOM manipulator function based on your needs. Sadly, the construct depends on your needs.