jQuery从ajax响应中包装tr和div

ajax响应包含html，它有两个元素

tr

和

div

。我需要将

tr

附加到

table

并需要将

div

移动到其他位置。但显然，将

tr

和

div

包装在一起只会给我

tr

（可能是因为它们不是有效的html）。我如何拆分它们，以便在一个变量中包含

tr

，在另一个变量中包含

div

（我可以使用regex replace先拆分

tr

和

div

，然后分别包装它们，但是regex是危险的，特别是在html标记上，它不是100%准确的）。考虑这一点：

var ajax_response = "<tr><td>Hello</td></tr><div>Move me</div>";
var $container = $(ajax_response).wrap("<div />").parent();
alert($container.html()); // this only has tr not div

var ajax_response = "<tr><td>Hello</td></tr><div>Move me</div>";

// Split it on the div element
parts = ajax_response.split(/<div>/, 2);

// Add the div back to the element
parts[1] = '<div>' + parts[1];

// Create your jQuery objects, one for the tr and one for the div
var tr = $(parts[0]);
var div = $(parts[1]); 

var ajax\u response=“HelloMove me”；
var$container=$（ajax_响应）.wrap（“”.parent（）；
警报（$container.html（））；//这只有tr没有div

这是无效的HTML结构。浏览器将把div移到表外。由于只追加了

tr

，因此

div

将不可见

唯一的选择是像这样将div移动到td内部

var ajax_response  = $('<output/>').append('<tr><td>Hello<div>Move me</div></td></tr>');
var div = ajax_response.find('div').remove();
var tr = ajax_response.find('tr');

var response = '<table>';
var response += ajax_response + '</table>';
var output = $.parseXML(response);
var div = $(output).find('div');
var tr = $(output).find('tr');

var ajax_response=$（''）.append（'HelloMove me'）；
var div=ajax_response.find（'div'）.remove（）；
var tr=ajax_response.find（'tr'）；

---

更新 你可以这样用

var ajax_response  = $('<output/>').append('<tr><td>Hello<div>Move me</div></td></tr>');
var div = ajax_response.find('div').remove();
var tr = ajax_response.find('tr');

var response = '<table>';
var response += ajax_response + '</table>';
var output = $.parseXML(response);
var div = $(output).find('div');
var tr = $(output).find('tr');

var响应=”；
var响应+=ajax_响应+''；
var输出=$.parseXML（响应）；
var div=$（输出）.find（'div'）；
var tr=$（output.find（'tr'）；

这是因为parseXML创建了一个有效的XML文档。为了创建有效的XML，它将div推到表外，这就是为什么需要将

包装在响应周围的原因。然后使用jquery将XML文档转换为jquery对象，并使用find获取所需的元素

我希望这是有道理的

---

这里是一个演示，它不是有效的HTML，因此div丢失。您必须进行一些手动字符串解析。这是非常危险的，这取决于您的ajax响应

考虑这一点：

var ajax_response = "<tr><td>Hello</td></tr><div>Move me</div>";
var $container = $(ajax_response).wrap("<div />").parent();
alert($container.html()); // this only has tr not div

var ajax_response = "<tr><td>Hello</td></tr><div>Move me</div>";

// Split it on the div element
parts = ajax_response.split(/<div>/, 2);

// Add the div back to the element
parts[1] = '<div>' + parts[1];

// Create your jQuery objects, one for the tr and one for the div
var tr = $(parts[0]);
var div = $(parts[1]); 

var ajax\u response=“HelloMove me”；
//在div元素上拆分它
parts=ajax\u response.split（/，2）；
//将div添加回元素
部分[1]=''+部分[1]；
//创建jQuery对象，一个用于tr，一个用于div
var tr=$（部分[0]）；
var div=$（第[1]部分）；

但是，这真的很糟糕，因为如果ajax响应是这样的话会发生什么：

var ajax_response = "<tr><td><div>Hello</div></td></tr><div>Move me</div>";

var ajax\u response=“HelloMove me”；

这样的响应将破坏您的代码。很可能元素中有一个div

没有好的方法来处理你的情况，使它在所有情况下都有效。我的建议是看看您是否可以更改ajax响应，使其为jSon格式，或者至少具有某种类型的分隔符，您可以在其上拆分。。。不会重复的事情

// This is better... Use a separator. 
// Something that won't get repeated like ||
var ajax_response = '<tr><td>Hello</td></tr>||<div>Move Me</div>';

// Split it
parts = ajax_response.split('||');

// Create your jQuery objects
var tr = $(parts[0]);
var div = $(parts[1]);

//这样更好。。。使用分隔符。
//不会被重复的东西，比如||
var ajax|u response='Hello | | Move Me'；
//分开
parts=ajax|u response.split（“||”）；
//创建jQuery对象
var tr=$（部分[0]）；
var div=$（第[1]部分）；

更好的方法是使用jSon

// Make the ajax response be jSon
var ajax_response = '["<tr><td>Hello</td></tr>","<div>Move Me</div>"]';

// Parse the jSon
parts = JSON.parse(ajax_response);

// Create your jQuery objects, one for the tr and one for the div
var tr = $(parts[0]);
var div = $(parts[1]); 

//将ajax响应设置为jSon
var ajax_response='[“你好”，“移动我”]；
//解析jSon
parts=JSON.parse（ajax\u响应）；
//创建jQuery对象，一个用于tr，一个用于div
var tr=$（部分[0]）；
var div=$（第[1]部分）；

这不是一个优雅的解决方案，但它可以在不使用正则表达式的情况下将它们分开：

var arr = a.split('r><d'),
     tr = arr[0] += 'r>',
    div = arr[1] = '<d' + arr[1];

var arr=a.split（'r>”，
div=arr[1]=“不工作
$（“”）.append
将验证html并忽略div。任何jQuery方法都会这样做。我认为唯一的选择是进行javascript拆分。很抱歉，示例代码没有反映我提出的建议。必须将div移动到td内部，然后才能工作。我现在更新了代码。请检查我不能在
内部移动
div
“td它来自Ajax响应和<代码> div <代码>出现在<代码> Tr/代码>之后。考虑到它是一个我不能改变的限制。@ AmirADNAN:我找到了一个方法。请检查答案，看看它是否适合你。我解决过的最棘手的问题之一：DypUp工作，谢谢！<代码> PARSEXML是这样的。这个问题非常巧妙。（我知道：）