jquery更改dom中的元素位置

嘿，我想改变DOM中某些元素的位置，例如.teach2中的.off-date，但如果这些元素在页面上有两个或两个以上，它会预先准备两个或多个元素，而不是一个，所以结果是我在页面上有四个.off-date元素，而不是两个。。我能以某种方式防止这种情况吗？欢迎任何建议

if ($(window).width() < 767) {

        $(".teach2 .off-place").prependTo($(".teach2 .off-date"));

     }


       <div class="teacher-box teach2">

            <span class="typo off-name">Magdalene</span>
            <span class="typo off-type">with partners</span>
            <span class="typo off-date">wed DEC 15 </span>
            <span class="typo off-time">19.30 - 20.30</span> 
            <span class="typo off-place">at home</span>

        </div>

        <div class="teacher-box teach2">

            <span class="typo off-name">Magdalene</span>
            <span class="typo off-type">with partners</span>
            <span class="typo off-date">wed DEC 15 </span>
            <span class="typo off-time">19.30 - 20.30</span>
            <span class="typo off-place">at home</span> 

        </div>

if（$（窗口）.width（）<767）{
$（“.teach2.off-place”）.prependTo（$（“.teach2.off-date”）；
}
抹大拉
与合作伙伴
12月15日星期三
19.30 - 20.30 
在家里
抹大拉
与合作伙伴
12月15日星期三
19.30 - 20.30
在家里

您必须指定要更改的元素。XPath或CSS选择器可以帮助实现这一点

---

另一方面，看起来您正在尝试创建一个自适应网页。也许你应该研究另一种方法？灵活的布局、响应性强的设计——它已经被发明出来了。

以下是您可以在纯css中实现的功能

.teacher框{
显示器：flex；
}
.打字错误{
利润率：0.1px；
}
.off name{
顺序：1；
}
.关闭类型{
顺序：2；
}
.过期{
顺序：3；
}
.休息时间{
顺序：4；
}
.不合适的地方{
顺序：5；
}
@介质（最大宽度：768px）{
.off name{
顺序：1；
}
.关闭类型{
顺序：2；
}
.过期{
顺序：4；
}
.休息时间{
顺序：5；
}
.不合适的地方{
顺序：3；
}
}

抹大拉
与合作伙伴
12月15日星期三
19.30 - 20.30
在家里

您需要使用

.each（）

在每个

.off-place

上迭代，这样您就可以在同一个DIV中将其预先添加到

.off-date

$（“#但是”）。单击（函数（）{
$（“.teach2.off place”）。每个（函数（）{
$（this.prependTo（$（this.sillides）（.off date））；
});
});

点击移动
抹大拉
与合作伙伴
12月15日星期三
19.30 - 20.30 
在家里
抹大拉
与合作伙伴
12月15日星期三
19.30 - 20.30
在家里
介意为这个问题创建一个JSFIDLE吗？你能清楚地解释一下你想把截止日期放在哪里吗？你提到过要更改截止日期，但是在你写的代码中，截止日期不在标记中，或者现在更新它。。。我需要一个地方。比如说以前不在的地方。不在的日期。。它可以工作，但问题是它在一个教师框中重复了两个。异地元素你确定
prependTo（）
真的是你想要的吗？这将把一个跨度放在另一个跨度内。也许你真的想要
insertBefore（）
，这样它们就可以保持在同一个级别？是的，但即使使用flexbox，我也不能在DOM中进行高级移动，然后尝试XPath或CSS选择器，或者使用div ID。@Alex？您能解释一下“XPath”或“div id”吗？在大多数情况下，您可以为几乎任何元素分配一个id:。这允许您出于任何目的选择该确切元素。对于JQuery，它将是：$（“#myDiv”）。注意，ID在页面上必须是唯一的。至于XPath，它是一种在XML文档中导航的方法。你可以在这里读到更多关于它的内容：但我严重怀疑它是否与你的情况有关。