javascript - 如何在使用 jquery/css 删除隐藏 div 后按顺序移动 div "up"

Question

这更像是一种特定情况，但我有几行 div。现在，如果我点击“查看全部”，就会弹出第二行，如下图所示。它在四列的行中。

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

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

我想要的是，如果 [d] 被删除，[e] 应该取而代之，所有其他元素应该向上移动一个位置，所以它看起来像:

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

[f] [g] [h]

我将代码分成两部分。一个部分(上图的第一行)只是连续的四个 div/元素。第二部分包含所有剩余行。

我以这样的方式制作它，即两个部分由不同的模型数据提供(使用 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> 

Answer 1

试试这个 fiddle :http://jsfiddle.net/ScZbP/然后单击包含“d”的 div。确实需要查看您的 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;
}

编辑----------------

或者:合并您的文章，不要将它们列在单独的部分中。当您遍历“最新”列表时，将“最新”类添加到每篇文章中，如下所示:

这是它的 fiddle http://jsfiddle.net/Td8T8/2/和下面的代码。

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

迭代时，您需要在每第 4 个元素上添加另一个类 我刚刚将其设置为“最后一个”。为什么要设置这个类？我会在另一个 下面的步骤。

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

对于您的“过去列表”，在迭代时添加一个“过去”类:

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

然后在每第 4 个元素上再次添加“最后”类。

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

对于类为“过去”的文章不显示:

.past{
    display:none;
}

然后 float 子文章:

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's 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));
        }
    });
});