Изменить порядок div с помощью JavaScript

Question

Изменить порядок div с помощью JavaScript

0

Я пытаюсь изменить порядок div с помощью JavaScript ". Так я могу это сделать?

<div id="pageWrapper">
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
    <div id="four">4</div>
</div>

$(document).ready(function(){ 
        $('#pageWrapper').prepend('#three');
        $('#pageWrapper').prepend('#four');

});

nick 08 март 2014, в 01:16

Источник

0

Ну, это работает? Вы пытались запустить код?
Derek 朕會功夫 08 март 2014, в 00:09
0

Вам следует рассмотреть возможность использования CSS flexbox для достижения этой цели.
Terry 08 март 2014, в 00:09
0

почему я получаю -1 это довольно простой вопрос, как мне добавить один div, чтобы он переместился от того места, где он находится, к первому дочернему элементу упаковщика страниц?
nick 08 март 2014, в 00:14
1

@ user3117555 - Это не работает, потому что prepend принимает узел или объект jQuery вместо String: jsfiddle.net/DerekL/eHq2a
Derek 朕會功夫 08 март 2014, в 00:16

Показать ещё 2 комментария

Теги:

javascript

jquery

html5

3 ответа

1

prepend не принимает селектор String. Из документа:

.prepend( content [,content] )
────────────────────────────────────────────────── ──────────────
содержание
Тип: htmlString или Element или Array или jQuery

DOM, массив элементов, HTML-строку или объект jQuery для вставки в начале каждого элемента в наборе согласованных элементов.

Вместо этого вы должны передать объект jQuery:

http://jsfiddle.net/DerekL/eHq2a/

$('#pageWrapper').prepend($('#three'));
$('#pageWrapper').prepend($('#four'));

//or just

$('#pageWrapper').prepend($('#four'), $('#three'));

Однако интересно .prependTo принимает селектор String:

$("#three").prependTo("#pageWrapper");

Derek 朕會功夫 07 март 2014, в 21:46

-1

Тогда используйте некоторый отзывчивый дизайн. В вашем случае используйте запросы @media в CSS. Лучше, чем делать это в скрипте.

@media screen and (max-width:980px) {
/* your style */
}

Если вы все еще предпочитаете использовать скрипт, вы можете подписаться на обработчик события изменения размера, например

$( window ).resize(function() {
  if($(window).width()<requiredMinimum)
  {
    //dowhatever
  }
  else
  {
    //revertback
  }
});

Ananthan Unni 07 март 2014, в 22:23

2

Хороший совет, но ... как это отвечает на вопрос?
JFK 08 март 2014, в 00:11

Ещё вопросы

Ну, это работает? Вы пытались запустить код?
Вам следует рассмотреть возможность использования CSS flexbox для достижения этой цели.
почему я получаю -1 это довольно простой вопрос, как мне добавить один div, чтобы он переместился от того места, где он находится, к первому дочернему элементу упаковщика страниц?
@ user3117555 - Это не работает, потому что prepend принимает узел или объект jQuery вместо String: jsfiddle.net/DerekL/eHq2a
Хороший совет, но ... как это отвечает на вопрос?

lifetimes · Accepted Answer · 2014-03-07T21-21-00.000Z

Вы можете использовать это с window.resize() если это необходимо (вы должны использовать оператор else, чтобы снова установить его значение по умолчанию)

$(document).ready(function(){
    $(window).resize(function(){    
     if ($(window).width() < 980) {
        $('#three').insertBefore('#one');
        $('#four').insertBefore('#two');
     } else {
      // Set back to default, or whatever you like.
     }
    });
});

jsFiddle здесь.

Это будет работать, хотя prependTo, вероятно, более логичный метод для использования. api.jquery.com/prependTo