У меня есть несколько div, которые отображают "встроенный блок" на странице. Они сгруппированы в категории, например, 4 divs в 1 (все с классом. Category1), 3 divs в категории 2 (все с классом.category2) и 5 divs в категории 3 (все с классом.category3). У меня также есть ссылки для всех категорий. То, что я пытаюсь сделать, - когда вы нажимаете ссылку, divs в этой категории все перемещаются в начало "списка"... и так далее, когда вы продолжаете нажимать на ссылки разных категорий.
До сих пор я делал divs disapear из того места, где они есть, но как я могу заставить их снова появиться в моем списке?
$('li.menu_category1').click(function(){
$('.category1').css("display","none");
});
Вы должны использовать функцию jQuery prepend()
:
$('li.menu_category1').click(function(){
$('.category1').parent().prepend($('.category1'));
});
prepend()
и append()
будут перемещать существующие элементы.
Вы также должны усовершенствовать этот код, но я не могу не знать больше вашего кода и html.
http://jsfiddle.net/kasperfish/p68pH/2/
$(function() {
$('.btn').click(function(){
c=$(this).html();
$('.'+c).prependTo('body');
});
});
<span class="btn">blue</span><span class="btn">green</span><span class="btn">yellow</span>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>