Javascript 响应时使用jQuery更改html的结构

我想要的是在640px下改变HTML页面的te结构。 这就是我的结构：

<div class="people_row">    
    <div class="single_person 0"></div>
    <div class="single_person 1"></div>
    <div class="single_person 2"></div>
    <div class="single_person 3"></div>
    <div class="single_person 4"></div>
    <div class="single_person 5"></div>
    <div class="info_block 0"></div>
    <div class="info_block 1"></div>
    <div class="info_block 2"></div>
    <div class="info_block 3"></div>
    <div class="info_block 4"></div>
    <div class="info_block 5"></div>
    <div class="single_person 6"></div>
    <div class="single_person 7"></div>
    <div class="single_person 8"></div>
    <div class="single_person 9"></div>
    <div class="single_person 10"></div>
    <div class="single_person 11"></div>
    <div class="info_block 6"></div>
    <div class="info_block 7"></div>
    <div class="info_block 8"></div>
    <div class="info_block 9"></div>
    <div class="info_block 10"></div>
    <div class="info_block 11"></div>
</div>

我想要的是：

<div class="people_row">    
    <div class="single_person 0"></div>
    <div class="single_person 1"></div>
    <div class="single_person 2"></div>
    <div class="info_block 0"></div>
    <div class="info_block 1"></div>
    <div class="info_block 2"></div>
    <div class="single_person 3"></div>
    <div class="single_person 4"></div>
    <div class="single_person 5"></div>
    <div class="info_block 3"></div>
    <div class="info_block 4"></div>
    <div class="info_block 5"></div>
    <div class="single_person 6"></div>
    <div class="single_person 7"></div>
    <div class="single_person 8"></div>
    <div class="info_block 6"></div>
    <div class="info_block 7"></div>
    <div class="info_block 8"></div>
    <div class="single_person 9"></div>
    <div class="single_person 10"></div>
    <div class="single_person 11"></div>
    <div class="info_block 9"></div>
    <div class="info_block 10"></div>
    <div class="info_block 11"></div>
</div>

我不想在我的代码中有重复的div，当下降到640px以下时，在那个元素上做一个显示块。我想用jQuery实现这一点

谢谢 斯坦

编辑： 我尝试过这个，但肯定有比这个更好的解决方案：

var infoblock0 = $(".info_block.0").html();
$(".info_block.0").remove();
$(".single_person.2").after("<div class='info_block 0'>"+infoblock0+"</div>");

var infoblock1 = $(".info_block.1").html();
$(".info_block.1").remove();
$(".single_person.2").after("<div class='info_block 1'>"+infoblock1+"</div>");

var infoblock2 = $(".info_block.2").html();
$(".info_block.2").remove();
$(".single_person.2").after("<div class='info_block 2'>"+infoblock2+"</div>");

var infoblock6 = $(".info_block.6").html();
$(".info_block.6").remove();
$(".single_person.8").after("<div class='info_block 6'>"+infoblock6+"</div>");

var infoblock7 = $(".info_block.7").html();
$(".info_block.7").remove();
$(".single_person.8").after("<div class='info_block 7'>"+infoblock7+"</div>");

var infoblock8 = $(".info_block.8").html();
$(".info_block.8").remove();
$(".single_person.8").after("<div class='info_block 8'>"+infoblock8+"</div>");

var infoblock0=$（.info_block.0”）.html（）；
$（“.info_block.0”）.remove（）；
美元（“.single_person.2”）。在（“+infoblock0+”）之后；
var infoblock1=$（“.info_block.1”）.html（）；
$（“.info_block.1”）.remove（）；
美元（“.single_person.2”）。在（“+infoblock1+”）之后；
var infoblock2=$（“.info_block.2”）.html（）；
$（“.info_block.2”）.remove（）；
$（“.single_person.2”）。在（“+infoblock2+”）之后；
var infoblock6=$（“.info_block.6”）.html（）；
$（“.info_block.6”）.remove（）；
美元（“.single_person.8”）。在（“+infoblock6+”）之后；
var infoblock7=$（“.info_block.7”）.html（）；
$（“.info_block.7”）.remove（）；
美元（“.single_person.8”）。在（“+infoblock7+”）之后；
var infoblock8=$（“.info_block.8”）.html（）；
$（“.info_block.8”）.remove（）；
美元（“.single_person.8”）。在（“+infoblock8+”）之后；

所以，当窗口调整大小时，您希望对元素重新排序，对吗

您可以尝试以下代码

$(function() {

var screenBig = $(window).width() >= 640;

$(window).resize(function() {
    if($(window).width() < 640 && screenBig) {
        resizeSmall();
        screenBig = false;
    } else if($(window).width() >= 640 && !screenBig) {
        resizeBig();
        screenBig = true;
    }
});

var resizeSmall = function() {
    var orig = $('.people_row');
    orig.append(orig.find('.single_person.0'));
    orig.append(orig.find('.single_person.1'));
    orig.append(orig.find('.single_person.2'));
    orig.append(orig.find('.info_block.0'));
    orig.append(orig.find('.info_block.1'));
    orig.append(orig.find('.info_block.2'));
    orig.append(orig.find('.single_person.3'));
    orig.append(orig.find('.single_person.4'));
    orig.append(orig.find('.single_person.5'));
    orig.append(orig.find('.info_block.3'));
    orig.append(orig.find('.info_block.4'));
    orig.append(orig.find('.info_block.5'));
    orig.append(orig.find('.single_person.6'));
    orig.append(orig.find('.single_person.7'));
    orig.append(orig.find('.single_person.8'));
    orig.append(orig.find('.info_block.6'));
    orig.append(orig.find('.info_block.7'));
    orig.append(orig.find('.info_block.8'));
    orig.append(orig.find('.single_person.9'));
    orig.append(orig.find('.single_person.10'));
    orig.append(orig.find('.single_person.11'));
    orig.append(orig.find('.info_block.9'));
    orig.append(orig.find('.info_block.10'));
    orig.append(orig.find('.info_block.11'));
}

var resizeBig = function() {
    var orig = $('.people_row');
    orig.append(orig.find('.single_person.0'));
    orig.append(orig.find('.single_person.1'));
    orig.append(orig.find('.single_person.2'));
    orig.append(orig.find('.single_person.3'));
    orig.append(orig.find('.single_person.4'));
    orig.append(orig.find('.single_person.5'));
    orig.append(orig.find('.single_person.6'));
    orig.append(orig.find('.single_person.7'));
    orig.append(orig.find('.single_person.8'));
    orig.append(orig.find('.single_person.9'));
    orig.append(orig.find('.single_person.10'));
    orig.append(orig.find('.single_person.11'));
    orig.append(orig.find('.info_block.0'));
    orig.append(orig.find('.info_block.1'));
    orig.append(orig.find('.info_block.2'));
    orig.append(orig.find('.info_block.3'));
    orig.append(orig.find('.info_block.4'));
    orig.append(orig.find('.info_block.5'));
    orig.append(orig.find('.info_block.6'));
    orig.append(orig.find('.info_block.7'));
    orig.append(orig.find('.info_block.8'));
    orig.append(orig.find('.info_block.9'));
    orig.append(orig.find('.info_block.10'));
    orig.append(orig.find('.info_block.11'));

}
});

$（函数（）{
var screenBig=$（窗口）.width（）>=640；
$（窗口）。调整大小（函数（）{
if（$（窗口）.width（）<640&&screenBig）{
resizeSmall（）；
屏幕大=假；
}如果（$（窗口）.width（）>=640&&！屏幕大）{
resizeBig（）；
屏幕大=真；
}
});
var resizeSmall=函数（）{
var orig=$（'.people_row'）；
原始追加（原始查找（'.single_person.0'）；
原始附加（原始查找（'.single_person.1'）；
原始附加（原始查找（'.single_person.2'）；
原始追加（原始查找（'.info_block.0'）；
原始追加（原始查找（'.info_block.1'）；
原始追加（原始查找（'.info_block.2'）；
原始附加（原始查找（'.single_person.3'）；
原始附加（原始查找（'.single_person.4'）；
原始附加（原始查找（'.single_person.5'）；
原始追加（原始查找（'.info_block.3'）；
原始追加（原始查找（'.info_block.4'）；
原始追加（原始查找（'.info_block.5'）；
原始附加（原始查找（'.single_person.6'）；
原始附加（原始查找（'.single_person.7'）；
原始附加（原始查找（'.single_person.8'）；
原始追加（原始查找（'.info_block.6'）；
原始追加（原始查找（'.info_block.7'）；
原始追加（原始查找（'.info_block.8'）；
原始附加（原始查找（'.single_person.9'）；
原始附加（原始查找（'.single_person.10'）；
原始附加（原始查找（'.single_person.11'）；
原始追加（原始查找（'.info_block.9'）；
原始追加（原始查找（'.info_block.10'）；
原始追加（原始查找（'.info_block.11'）；
}
var resizeBig=函数（）{
var orig=$（'.people_row'）；
原始追加（原始查找（'.single_person.0'）；
原始附加（原始查找（'.single_person.1'）；
原始附加（原始查找（'.single_person.2'）；
原始附加（原始查找（'.single_person.3'）；
原始附加（原始查找（'.single_person.4'）；
原始附加（原始查找（'.single_person.5'）；
原始附加（原始查找（'.single_person.6'）；
原始附加（原始查找（'.single_person.7'）；
原始附加（原始查找（'.single_person.8'）；
原始附加（原始查找（'.single_person.9'）；
原始附加（原始查找（'.single_person.10'）；
原始附加（原始查找（'.single_person.11'）；
原始追加（原始查找（'.info_block.0'）；
原始追加（原始查找（'.info_block.1'）；
原始追加（原始查找（'.info_block.2'）；
原始追加（原始查找（'.info_block.3'）；
原始追加（原始查找（'.info_block.4'）；
原始追加（原始查找（'.info_block.5'）；
原始追加（原始查找（'.info_block.6'）；
原始追加（原始查找（'.info_block.7'）；
原始追加（原始查找（'.info_block.8'）；
原始追加（原始查找（'.info_block.9'）；
原始追加（原始查找（'.info_block.10'）；
原始追加（原始查找（'.info_block.11'）；
}
});

我还没有测试过，但你应该明白这一点；）

基本上，它会向窗口调整大小事件添加一个侦听器，当更改为大于640px或小于640px时，它会运行相应的函数

这就是为什么有

screenBig

变量，以避免在每次调整大小时运行调整大小功能（即从1000px调整大小到900px不需要执行该功能）

这些函数只是根据需要对元素重新排序

---

另外，你可以尝试一个响应性设计框架，但如果你只想做简单的事情，这应该行得通^ ^

很抱歉，我没有发布我尝试过的东西，这很管用，但很难看。我把它贴上去了，所以也许有人知道更好的解决方案，为什么不使用Bootstrap呢？您可能只想在这里使用响应代码：谢谢您的评论！但起源尚未确定。我该怎么办？对不起，我忘了。现在是：）谢谢：）这更好：）