Динамически изменять позиции Div на основе идентификатора с помощью css / jquery

#jquery

Вопрос:

Используя CSS-сектора и jQuery, я хочу изменить положение div на основе идентификатора, переданного пользователем. Допустим, пользователь передает 1683 в строке запроса, я хочу, чтобы div с идентификатором post-1683 вверху, а затем следует post-1681, post-1682, post-1684

Вот текущий формат.

 <div class="container">
    <div class="head">....</div>
    <div class="post-1681 status-publish hentry id="post-1681">.......</div>
    <div class="post-1682 status-publish hentry id="post-1682">.......</div>
    **<div class="post-1683 status-publish hentry id="post-1683">.......</div>**
    <div class="post-1684 status-publish hentry id="post-1684">.......</div>
</div>

но ожидаемое отображение должно быть следующим:

 <div class="container">
    <div class="head">....</div>
    **<div class="post-1683 status-publish hentry id="post-1683">.......</div>**
    <div class="post-1681 status-publish hentry id="post-1681">.......</div>
    <div class="post-1682 status-publish hentry id="post-1682">.......</div>
    <div class="post-1684 status-publish hentry id="post-1684">.......</div>
</div>

Пожалуйста, имейте в виду, что все эти идентификаторы div генерируются динамически, но div, который я хочу отобразить сверху, будет доступен мне через параметр запроса.

1. Таким образом, пользователь передает идентификатор в URL, затем вы якобы генерируете HTML из jQuery или вызова DB, а затем контейнер обновляется. Это правильно? Как вы это делаете сейчас? Какой jQuery вы пробовали?

2. Как вы добавляете его сейчас?

3. Что вы подразумеваете под добавлением, я ничего не добавляю в данный момент, и если вы видите, что я получаю все строки и отображаю их последовательно, я хочу изменить расположение div

4. Итак, у вас уже есть полный список на странице, и вы просто хотите изменить порядок на основе параметра URL?

Ответ №1:

 var id="1683";
$('#post-' id).insertAfter($('div.head'));

Пример jsFiddle

Ответ №2:

Итак, вы хотите добавить свой новый элемент после div с помощью class head . Это так?

Затем вы можете использовать after() так:

 $(".head").after('<div class="post-1683 status-publish hentry id="post-1683">...</div>');

Или, если у вас уже есть все div s, а затем вы хотите изменить его положение, вам нужно сначала отсоединить его и сделать это:

 $(".post-1683").detach().insertAfter(".head");

Рабочий код:
http://jsbin.com/rodotovo/1/edit

1. любая конкретная причина .detach, она прекрасно работает и без этого.

2. Нет, не по какой-либо причине, а исходя именно из того, что нужно сделать в реальных сценариях, поэтому ответил на то, что первым пришло в голову 🙂