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>

所以我拿了＆＃34;项目＆＃34; class并将其移动到描述类中。我如何为所有产品实现这一目标？我认为它看起来像这样：

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

的 DEMO

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>

它的工作方式：我选择所有prodcuts div。我循环进入每一个并选择标记为“item”的div，然后移动该div并将其附加到标有“description”的div中。 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);进行显示。如果是这样，您可以在后端脚本（产品页面）中排列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);
    });
});

编辑：在我提交答案之前已经添加了评论，并且由于AJAX端点来自第三方，因此上面意识到不会回答OP。

如果数据来自第三方，则需要根据需要创建DOM操纵器功能。可悲的是，构造取决于您的需求。

使用jQuery从ajax请求移动返回的数据

3 个答案: