Question

当他们在字符串变量中时，我试图用Jquery切换2个元素时遇到一些困难。

例如：

var myString = 
              "<div class='chatMessage'>Something here 
               <div class='test'>My test</div>
               <div class='anotherTest'> the other test</div>
               Something there
               </div>";

我想要的是切换两个类，制作＆＃34; anotherTest＆＃34;面对＆＃34;测试＆＃34;。

到目前为止，我所尝试的是：

var myString = 
              "<div class='chatMessage'>Something here 
               <div class='test'>My test</div>
               <div class='anotherTest'> the other test</div>
               Something there
               </div>";

var div1 = myString.filter('.test');
var div2 = myString.filter('.anotherTest');

var tdiv1 = div1.clone();
var tdiv2 = div2.clone();

myMessage = div1.replaceWith(tdiv2);
myMessage = div2.replaceWith(tdiv1);

但是我收到以下错误

t.replace is not a function

我想知道如何在将变量存储到变量中之前切换两个div，然后再将其显示给用户？

Answer 1

您通过添加需要通过直接字符串操作完成的约束来使自己更难。 HTML旨在呈现在DOM中 - 因为它是一个＆＃34;文档对象模型＆＃34;理所当然，它更适合将文档建模为对象。

jQuery可能看起来有点老套，但它的全部目的是让DOM更容易查询，所以它在这里工作得很好。您需要做的就是解析字符串，查询要移动的节点，并将其插入到您想要的元素之前。您可以使用$.fn.html()恢复HTML，或者如果您要将其插入页面的某个位置，则可以将其作为元素保留。

var $el = $(myString);
$('.anotherTest', $el).insertBefore($('.test', $el));
var myMessage = $el.html();

jsfiddle here

Answer 2

试试这个。只需将字符串拆分为"</div>"，它将生成一个拆分内容数组，然后将"</div>"重新添加到每个拆分字符串（这将在拆分过程中使用）。然后重新组装。

https://jsfiddle.net/8a4wgn7k/

var myString = "<div class='test'>My test</div><div class='anotherTest'> the other test</div>";


var res = myString.split("</div>");
res[0] +="</div>";
res[1] +="</div>";
var switchedString=res[1]+res[0]

Jquery在变量内部切换元素

2 个答案: