jquery - 在一行浮动元素之间添加一个元素

Question

我有一堆在网格中对齐的盒子。

它们都向左浮动，然后一个框的边距和宽度约为33％，这样一旦三个框彼此相邻，接下来的框就会进入下一行。相当均匀的三分之一。

这就是我开始的：

当点击一个框时，我现在想在我点击的框下添加一个框。

我希望看到它的发生方式几乎只是增加了一排盒子之间的空间，而新盒子被挤进了那个空间。

这是我想看到的：

目前我只是使用 jquery.after()在我单击的框后添加一个框。这个框有clear:both;并且它会完美地工作，但只有在点击第三个框时......当我点击第二个或第一个框时，同一行的以下框会浮动到下一行。当然，这是完全可以预测的，因为它完全按照我的指示去做。 但我希望他们留在那里！我只是不知道怎么做。

这就是我得到的：

实现这一目标的最佳方法是什么？

这是我的代码示例：http: //jsfiddle.net/z3ggf/1/

Answer 1

所以基本上，你需要找到行中的最后一个（第三个）框，然后附加一些 html

$(".box").click(function(){
    var next_third_box_index = Math.floor($(this).index('.box') / 3) * 3 + 2;            
    var $third = $('#container .box:eq('+next_third_box_index+')');      
    $third.after('<div class="break"></div>');                   
});

jQuery 演示：

• http://jsfiddle.net/9MMWs/

文件：

• http://api.jquery.com/index/

---

这是您在单击 div 的行中找到第三个框的索引的方法：

Math.floor($(this).index('.box') / 3) * 3 + 2;

• 如果单击框 0，则第三个框索引等于 floor(0 / 3) * 3 + 2 = 2
• 如果单击框 1，则第三个框索引等于 floor(1 / 3) * 3 + 2 = 2
• 如果单击框 2，则第三个框索引等于 floor(2 / 3) * 3 + 2 = 2
• 如果单击框 3，则第三个框索引等于 floor(3 / 3) * 3 + 2 = 5
• 如果单击框 4，则第三个框索引等于 floor(4 / 3) * 3 + 2 = 5
• 如果单击框 5，则第三个框索引等于 floor(5 / 3) * 3 + 2 = 5
• 如果单击框 6，则第三个框索引等于 floor(6 / 3) * 3 + 2 = 8
• ...