这是一种用jQuery重新排序的有效方法吗？
这是一种用jQuery重新排序的有效方法吗？
提问于 2015-05-29 00:15:52
下面的脚本检查浏览器的宽度，如果在dom元素上检测到css元素text-align:center，就会移动一些div。此css元素依赖于980px的媒体查询。代码运行得很顺利，但我觉得也许有一种更简单的方法可以做到这一点。我知道这可能已经通过浮动在CSS中完成了，但我觉得这将是一种更干净的方式。任何关于如何使这段代码更有效的建议都将不胜感激。
$(document).ready(function(){
function moveDiv(){
var $window = $(window);
var windowsize = $window.width();
if (windowsize < 980) {
if ($(".interiortitle h1").css("text-align") == "center"){
$( ".interiorpage .et_pb_column_1_4").insertAfter(".interiorpage .et_pb_column_3_4");
}
}
else if (windowsize > 980) {
$( ".interiorpage .et_pb_column_1_4").insertBefore(".interiorpage .et_pb_column_3_4");
}
}
moveDiv();
$(window).resize(moveDiv);
});回答 2
Stack Overflow用户
发布于 2015-05-29 00:42:55
你可以试试这个：
检查您的窗口大小是否已更改，并为div应用一个新类：
var changeposdiv= $('.changeposdiv');
var $window = $(window);
var windowsize = $window.width();
if (windowsize > 980) {
changeposdiv.addClass('more980');
}您的HTML示例
<div class="interiordiv">
ABC
</div>
<div class="changeposdiv">
Change it
</div>CSS将移动用户屏幕中的元素
.changeposdiv, .interiordiv {
float: left
}
.more980 {
float: right;
}这对你有帮助吗？
Stack Overflow用户
发布于 2015-05-29 00:44:28
你在找像this这样的东西吗？当您更改页面宽度时，红色和绿色列将交换侧边。
HTML
<html>
<body>
<div class="interiorpage">
<div class="et_pb_column_1_4"></div>
<div class="et_pb_column_3_4"></div>
</div>
</body>
</html>CSS
.interiorpage{
height: 200px;
border: 1px solid black;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
div[class^=et_pb_column_]{
width: 50%;
height:100%;
}
.et_pb_column_1_4{
background: #fcc;
order: 2;
-webkit-order: 2;
}
.et_pb_column_3_4{
background: #cfc;
order: 1;
-webkit-order: 1;
}
@media all and (max-width: 500px) {
.et_pb_column_1_4{
order: 1;
-webkit-order: 1;
}
.et_pb_column_3_4{
order: 2;
-webkit-order: 2;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30511967
复制相关文章
相似问题
腾讯云开发者
