使用 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"类并将其移动到描述类中。如何为所有产品完成此操作？我想它看起来像这样：

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

Answer 1

给定此 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。我循环到每一个并选择标记为"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 2

很难从显示的内容中分辨出您实际得到的响应。假设它是完整的wrapper做：

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

演示

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

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

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