Jquery，CSS - 如何在列表中将元素设置为第一个

Question

I dynamically generate a bunch of item, and that looks something like this:

<div class=gallery_wrapper>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
......
</div>

There is a condition which checks if one of the figure meet the requirements and it then add class to that figure (class=main_img).

What I tried is to float figure to the right, and then float the one with class main_img to the left, but that works partially. There are 3 figure elements in the row, and with float method element with class is at the start of its row, not at the start of the list.

How can I set this element as first (at the beginning)?

Answer 1

Elements are nodes in a tree. What you need is to relocate it to the beginning of its parent.

If your element is in a jQuery object referenced by $elem , then with jQuery you'd do this:

$elem.prependTo($elem.parent())

Or this:

$elem.parent().prepend($elem)