javascript - 获取一排 float div中的最后一个div

Question

我有许多 div float 在几行中。 div 包含文本预览和向下滑动完整内容的链接(有关示例，请参见 http://jsfiddle.net/yDcKu/)。

现在发生了什么:当您向下滑动 content-div 时，它会在连接的预览之后立即打开。我想要发生的事情:打开行中最后一个 div 之后的 content-div。

我认为可以通过以下方式完成:
1.找出激活预览的行中最后一个div，
2. 给这个div 添加一个id
3. 将 content-div 附加到此 div。

我有一个使用 jQuery 的第 2 步和第 3 步的解决方案，但不知道如何执行第一步。我可以设法获取文档宽度以及每个 div 的 x 和 y 值，但我不知道如何找出哪个 div 具有最高的 x 值以及最高的 y 值，并且在行中激活的 preview-div。

有人知道吗？谢谢

Answer 1

这是一个可以满足您要求的示例。我简化了您的代码，因此您不必手动标识每个条目和预览。

http://jsfiddle.net/jqmPc/1/

有点复杂。如果您有任何问题，请告诉我。

基本上，当调整窗口大小时，脚本会遍历并找到每行中的第一个预览，方法是找到与第一个预览具有相同左偏移量的预览。然后，它将类 last 添加到(上一行)之前的条目，并将类 first 添加到此预览。我在这两个上都做了 css clear: left 以便在条目打开时一切正常换行。

我使您的代码通用，没有 ID:

<div class="preview">
    <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

这使您不必一遍又一遍地编写相同的代码。

打开/关闭脚本:

 $('.trigger').click(function() {
    $('.openEntry').slideUp(800); // Close the open entry
    var preview = $(this).closest('.preview');  // Grab the parent of the link

    // Now, clone the entry and stick it after the "last" item on this row:
    preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});

// Use "on()" here, because the "openEntry" is dynamically added 
// (and it's good practice anyway)
$('body').on('click', '.close', function() {
    // Close and remove the cloned entry
    $('.openEntry').slideUp(800).remove();
});

我敢肯定，这可以稍微简化一些，特别是如果您愿意通过将条目放入预览元素(但仍然隐藏)来重新格式化您的 html 多一点。这是一个稍微简单的版本，重新排列了 html:

http://jsfiddle.net/jqmPc/2/

(我还为行中的第一个和最后一个元素涂上颜色，这样您就可以看到发生了什么)