Question

我想要的是在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>");

Answer 1

那么，你想要的是在调整窗口大小时重新排序元素，对吗？

您可以尝试以下代码......

$(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'));

}
});

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

基本上，它为窗口调整大小事件添加了一个监听器，当CHANGES超过640px或小于640px时，它运行相应的函数。

这就是screenBig变量存在的原因，以避免在每次调整大小时运行调整大小函数（即从1000px调整到900px不需要执行该函数）。

这些功能可以根据需要重新排序元素。

此外，你可以尝试一个响应式设计的框架，但如果你只想要简单的东西，这应该工作^^

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

1 个答案: