Как сдвинуть div в порядке после удаления, скрывая div с помощью jquery / css

Question

Как сдвинуть div в порядке после удаления, скрывая div с помощью jquery / css

0

Это скорее конкретная ситуация, но у меня есть строки div. Прямо сейчас, если я нажму "Просмотреть все", появится вторая строка, изображенная на рисунке ниже. Он находится в строках с четырьмя столбцами.

View All
[a] [b] [c] [d]

[e] [f] [g] [h]

Я хотел бы, если [d] будет удалено, [e] должно занять свое место, а все остальные элементы должны перемещаться на одно место, так что это выглядит так:

[a] [b] [c] [e]

[f] [g] [h]

У меня код разбит на два раздела. Один раздел (верхняя строка, изображенная на рисунке выше) - это всего лишь четыре divs/items подряд. Второй раздел содержит все остальные строки.

Я сделал это таким образом, что два раздела питаются разными данными модели (используя цикл foreach).

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

РЕДАКТИРОВАТЬ:

<div class="section7 clearfix">
<div class="container">

  <section class="Con1Artists" id="show">
    <article class="topHeadingTitle">
      <article class="vieAllTitle"><a id="show2" href="#">View All</a></article>
    </article>

    <article class="MusicianCol clearfix" id="hide">
<?php $tracker=0; ?>
@foreach($latest_fan_likes as $like)

      @if($tracker==3)
      <article class="boxBg latest last" id="box-{{$like->id}}">
      @else
      <article class="boxBg latest" id="box-{{$like->id}}">
      @endif
        <div class="image-height">@if(Auth::user()->get()->id==$fan->id)<a href="#" class="remove-artist"><i id="all-{{$like->id}}" class="remove fa fa-times fa-lg"></i></a>@endif<a href="/artists/{{$like->id}}" title="image"><img src="{{$like->image_path}}" width="260" height="159" alt="" title=""></a></div>
          <article class="bottomTextMusic">
              <h2><a href="/artists/{{$like->url_tag}}">{{$like->stage_name}}</a></h2>
            </article>
            <article class="tooltipCon">
              <div class="nav-area">
                <div class="navbar">
                  <div class="container">
                    <ul class="nav">
                        <li class=""> 
                       </li>
                    </ul>   
                  </div>    
                </div>  
              </div>
            </article>
        </article>

<?php $tracker++; ?>
@endforeach

<?php $offset=0; ?>
@foreach($past_fan_likes as $like)

@if($offset%4==0 && $offset > 0)

@endif
        @if($offset%4==0 && $offset > 0)
        <article class="boxBg past last" id="box-{{$like->id}}">
        @else
        <article class="boxBg past" id="box-{{$like->id}}">
        @endif
          <div class="image-height"><a href="#" class="remove-artist"><i id="all-{{$like->id}}" class="remove fa fa-times fa-lg"></i></a><a href="/artists/{{$like->id}}" title="image"><img src="{{$like->image_path}}" width="260" height="159" alt="" title=""></a></div>
            <article class="bottomTextMusic">
              <h2><a href="/artists/{{$like->url_tag}}">{{$like->stage_name}}</a></h2>
            </article>
            <article class="tooltipCon">
              <div class="nav-area">
                <div class="navbar">
                  <div class="container">
                    <ul class="nav">
                        <li class=""> 
                       </li>
                    </ul>   
                  </div>    
                </div>  
              </div>
            </article>
        </article>

<?php $offset++; ?>
@endforeach   

    </article>
  </section>

user1072337 12 май 2014, в 08:32

Источник

0

покажи нам, что ты пробовал и сделай скрипку.
Tushar Gupta - curioustushar 12 май 2014, в 05:57
1

поделитесь своим jsfiddle
Bhushan Kawadkar 12 май 2014, в 05:57
0

В основном все элементы должны быть вложены в одного и того же родителя. Создание их в отдельных разделах кажется вашей ловушкой. Если A и E имеют разных родителей, вам придется удалить всю верхнюю часть, прежде чем четыре нижних элемента будут сдвинуты вверх.
ProfileTwist 12 май 2014, в 06:30
0

Я разбил его на разделы, чтобы у меня была возможность «показать больше». Я хочу, чтобы одна строка отображалась, а остальные - показывать одним кликом. Смотрите код выше.
user1072337 12 май 2014, в 22:22

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

Теги:

php

javascript

jquery

html

css

1 ответ

Ещё вопросы

покажи нам, что ты пробовал и сделай скрипку.
В основном все элементы должны быть вложены в одного и того же родителя. Создание их в отдельных разделах кажется вашей ловушкой. Если A и E имеют разных родителей, вам придется удалить всю верхнюю часть, прежде чем четыре нижних элемента будут сдвинуты вверх.
Я разбил его на разделы, чтобы у меня была возможность «показать больше». Я хочу, чтобы одна строка отображалась, а остальные - показывать одним кликом. Смотрите код выше.

alex · Accepted Answer · 2014-05-12T03-51-00.000Z

Попробуйте эту скрипку: http://jsfiddle.net/ScZbP/ и нажмите div, содержащий "d". Вам действительно нужно увидеть ваш код js и css, чтобы понять, почему он ведет себя так, как вам нравится.

JS

$('#parent div').click(function(){
   $(this).remove(); 
});

HTML

<div id="parent">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
</div>

CSS

#parent{
    width:200px;
}

#parent div{
    float:left;
    width:50px;
    background:#ddd;
    cursor:pointer;
}

EDIT--------------

ИЛИ: Объедините свои статьи и не перечислите их в отдельных разделах. Когда вы повторяете свой список "последние", добавьте "последний" класс в каждую статью следующим образом:

Вот сценарий для него http://jsfiddle.net/Td8T8/2/ и код ниже.

<article class="boxBg latest"> 
     your content
</article>

Во время итерации на каждый четвертый элемент вам нужно будет добавить еще один класс, который я только что установил как "последний". Зачем устанавливать этот класс? Я доберусь до этого на следующем шаге ниже.

<article class="boxBg latest last"> 
    your content
</article>

Для вашего "прошлого списка" добавьте "прошлый" класс при итерации:

<article class="boxBg past"> 
     your content
</article>

И затем на каждый четвертый элемент снова добавьте "последний" класс.

<article class="boxBg past last"> 
    your content
</article>

Для статей с классом "прошлое" их не отображать:

.past{
    display:none;
}

И плавайте детские статьи:

article.boxBg{
    float:left;
    border:1px solid #aaa;
}

Чтобы показать "все", как вы хотели, нажмите на свой элемент "Все" и покажите все скрытые "прошлые" предметы

$('#show2').click(function(){
    $('.past').show();
});

Поэтому теперь вам нужно отображать их в строках, содержащих 4 элемента, поэтому добавьте элемент для разделения строк/статей после каждого "последнего" элемента, который должен иметь каждый 4-й элемент в списке:

$('<div class="spacer"></div>').insertAfter($('.last'));

// CSS
.spacer{
    height:10px;
    width:100%;
    float:left;
}

Теперь отредактируйте щелчок элемента, чтобы удалить его:

$('.MusicianCol .boxBg').click(function(){
    // remove item clicked
    $(this).remove(); 

    // remove all spacer elements since the list order 
    // has now changed
    $('.spacer').remove();

    // iterate through remaining articles
    $('.boxBg').each(function(){
        // if it has the "last" class then remove it
        $(this).removeClass('last');

        // now we check the index of this item and detect
        // if it one of the "4th's"
        if (($(this).index() + 1) % 4 == 0){
            // add the "last" class to it
            $(this).addClass('last');

            // add spacer again
            $('<div class="spacer"></div>').insertAfter($(this));
        }
    });
});

Единственная проблема с этим, я не основываю это на ширине. Есть два отдельных раздела, один с четырьмя элементами в строке, а затем другой раздел со всеми оставшимися элементами (с 4-мя рядами всегда).
мы могли бы увидеть какой-то реальный код? Вы размещаете элементы в строке в таблице или с родительским div в качестве строки? было бы полезно больше информации и кода.
Хорошо, я дам вам код в РЕДАКТИРОВАТЬ, один момент.
Я добавил код. Проверьте РЕДАКТИРОВАТЬ.
Я бы объединил две статьи MuscianCol. Я верю, что так будет проще. Я постараюсь немного показать вам код.
и вы говорите, что родительский "Con1Artists" не имеет установленной ширины?
Хорошо, проверьте мои изменения с новым кодом и новой скрипкой. Надеюсь, это то, что вы ищете. Теперь у вас есть два разных способа сделать это.
Я попытался сделать что-то похожее на вашу стратегию, и кажется, что в моей версии подряд появляются только 3 элемента. Проверьте последнюю редакцию:
если в вашей версии только 3 элемента в строке, то это говорит вам, что в вашем цикле есть проблема ..
Посмотрите на Edit, цикл должен быть просто в порядке. На самом деле у меня нет ничего, что могло бы это отрезать.
Вы можете сделать скрипку, которая может облегчить отладку
Ну, очевидно, не будет четырех подряд, если они слишком широки, чтобы поместиться в контейнере. Если вы измените ширину контейнера, у вас все еще остается проблема того, что они все находятся в одном ряду. Вы не используете ни один из предложенных мной javascript, ни CSS, ни даже div «spacer», который разбивает результаты на строки по четыре столбца, неудивительно, что ваш пример не работает. Используйте код. Прежде чем сказать, что он "не работает", используйте ВСЕ код. У тебя на скрипке ничего этого нет.
Но прежде, не имея их всех подряд, этой ширины было достаточно, чтобы соответствовать 4. Фактически она разработана таким образом, что элементы div будут уменьшаться соответствующим образом в зависимости от размера экрана.
С моей оригинальной настройкой он подходит нормально ..
На самом деле, из того, что я вижу, у меня нет установленной ширины. Но с моими другими оригинальными разделами было 4 к ряду вместо 3. Я не уверен, почему это происходит.
у вас есть установленная ширина, она ясно показывает width="260" в скрипке. Плюс, даже если у вас нет одного набора, элемент будет иметь ширину по умолчанию, установленную на основе его содержимого, поэтому, почему в скрипте он показывает три. Я закончил оказывать помощь по этому вопросу.
Ширина задается для отдельных элементов div, но не для всей строки / раздела. Я создам скрипку, чтобы показать вам, что происходит, когда вы закрываете «статью» после первых 4.
Посмотрите на эту скрипку: jsfiddle.net/2XeFs/5 Она закрывается после первых четырех, а затем снова открывается для вторых 4. Таким образом, в каждой строке по четыре. В противном случае, если в одном разделе, он имеет 3 на строку.
давайте продолжим это обсуждение в чате