Блок div при клике на пункт, выше всех js

Версия MODX: Все

Здравствуйте! На странице есть 10 блоков див, выводятся по порядку вертикально, как можно реализовать чтобы при нажатии на кнопку например которая была создана для конкретного блока этот блок перемещался на первую позицию,

Есть скрипт:

<script> 
$(function() {
    $('div.link').click(function() {
        $('.boxa').insertAfter(this)
})
});
</script>

Вызов:

<div class="link">ссылка1</div>

И сам блок:

<div class="boxa">Поднимающийся див</div>

Тут получается только один блок можно поднять в самый верх по отношению к другим, а как можно для всех блоков это организовать, у каждого блока своя «ссылка»?

Теги:
блок div js

Двоишник
15.10.17 в 15:10

Комментарии (6)

Олег 16.10.2017 14:14 #
разметка:
```
<div class="boxes">
   <div class="box"><a href="#" class="link">to top</a></div>
   <div class="box"><a href="#" class="link">to top</a></div>
.....
   <div class="box"><a href="#" class="link">to top</a></div>
   <div class="box"><a href="#" class="link">to top</a></div>
</div>
```
css:
```
.boxes{
    display: flex;
    flex-direction: column;
}
.top{
   order:-1;
}
```
скрипт:
```
    $('.link').click(function(e) {
        e.preventDefault();
        $('.box').removeClass('top');
        $(this).closest('.box').addClass('top');
});
```
1. Двоишник 17.10.2017 15:10 #
  Олег спасибо! Это отличный вариант но его работа кардинально отличается от того примера, я возможно плохо описал: вот например есть 2 ссылки:
  <div class="link">ссылка1</div><div class="link">ссылка2</div>
  они находятся вверху страницы, и есть 2 блока:
  <div class="boxa1">Поднимающийся див</div><div class="boxa2">Поднимающийся див</div>
  у каждого блока разный класс и у ссылок разный класс, чтобы нажав на ссылку подымался верх блок с тем же классом что и у ссылки, как такое реализовать?
  1. Олег 17.10.2017 15:17 #
    
    покажите полностью код блоков, кнопок (основную структуру, то есть внешний блок, блоки, кнопки)
Двоишник 17.10.2017 15:36 #
Таких блоков 10 и каждый обёрнут уникальным классом, есть вот такая ссылка:
```
<div class="top1">Зайцы</div>
```
её класс соответствует классу которым обёрнут блок, таких ссылок 10 только с разными классами под каждый блок, при нажатии на ссылку тот блок которому соответствует класс подымался в самый верх по отношению ко всем остальным блокам, возможно такое?
```
<div class="top1" уникальный класс >
<span class="min">
Тут контент про зайцев
</span>
</div>
```
1. Олег 17.10.2017 15:57 #
  <div class="link" data-class="top1">Зайцы</div> <div class="link" data-class="top2">Другие зайцы</div>
  
  <div class="boxes"> <div class="box top1">Тут контент про зайцев</div> <div class="box top2">Тут контент про других зайцев</div> ... <div class="box top296"></div> </div>
  
  $('.link').click(function() { $('.box').removeClass('top'); $("."+$(this).data('class')).addClass('top'); });
  
  box — общий класс для всех блоков, которые могут «всплывать»
  
  .boxes{ display: flex; flex-direction: column; } .top{ order:-1; }
  1. Двоишник 17.10.2017 16:42 #
    
    Олег огромно спасибо! То что нужно, всё работает идеально.

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.