Является ли это эффективным способом переупорядочения HTML с помощью jQuery?

Скрипт ниже проверяет ширину браузера и перемещает некоторые divs вокруг, если он обнаруживает элемент css text-align:center на элементе dom. Этот элемент css зависит от медиа-запроса для 980px. Код работает без заминки, но мне кажется, что, возможно, был более простой способ сделать это. Я знаю, что это, вероятно, могло быть выполнено в CSS с помощью поплавков, но казалось, что это будет более чистый способ сделать это. Будем очень благодарны за любые рекомендации относительно того, как сделать этот код более эффективным.Является ли это эффективным способом переупорядочения HTML с помощью jQuery?

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

источник

2015-05-28 Louis Novick

CSS поплавки или медиа-запросов будет много много ** ** гораздо более эффективным, чем любой JavaScript, вы могли бы написать, чтобы сделать это. – CodingIntrigue

http://codereview.stackexchange.com/ – undefined

@RGraham: но css не может реорганизовать dom. посмотрите на два условия. его 'insertAfter', другой' insertBefore'. css не может настроить дерево таким образом. –

Вы могли бы попробовать это:

Проверьте, если ваш размер окна изменился и применить новый класс для 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; 
}

Вам это поможет?

источник

2015-05-28 16:42:55

Вы ищете что-то наподобие 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; 
    } 
}

источник

2015-05-28 16:44:27

Является ли это эффективным способом переупорядочения HTML с помощью jQuery?

ответ

Смежные вопросы