获取浮动div的一行中的最后一个div [英] Get the last div in a row of floating divs

问题描述

我有一些div浮动在几行。 div包含文本预览和用于向下滑动完整内容的链接（请参见 http://jsfiddle.net/yDcKu/ ）。

I have a number of divs floating in several rows. The divs contain text-previews and a link to slide down the full content (see http://jsfiddle.net/yDcKu/ for an example).

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

What happens now: When you slide down the content-div it opens right after the connected preview. What I want to happen: Open the content-div after the last div in the row.

我假设可以这样做：

1.找出哪个div是已激活预览行中的最后一个，

2.向此div添加一个id，然后

3.将content- div到这个div。

I assume the could be done by:
1. find out which div is the last one in the row of the activated preview,
2. add an id to this div and
3. append the content-div to this div.

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

I have a solution for steps 2 und 3 using jQuery but no guess how to do the first step. I can manage to get the document width and the x- and y-value of each div but I have no idea how to find out which div has the highest x- as well the highest y-value and as well is in the row of the activated preview-div.

任何想法任何人？感谢

推荐答案

这里有一个例子来做你想要的。我简化了您的代码，因此您不必手动ID每个条目和预览。

Here is an example that does what you want. I simplified your code, so you don't have to manually ID every entry and preview.

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

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

It's a little complicated. Let me know if you have questions.

基本上，当窗口调整大小时，脚本通过查找预览，左偏移作为第一个偏移。然后，向此预览的前面（上一行）和类第一之前的条目添加一个类 last 我对这两个都做了css clear：left 。

Basically, when the window is resized, the script goes through and finds the first preview in each row by finding the preview with the same left offset as the very first one. It then adds a class last to the entry before (previous row) and class first to this preview. I do css clear: left on both of these so that everything wraps normally when the entries open.

您的代码通用，不带ID：

I made your code generic, without IDs:

<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>

这样就不必重复写相同的代码了。

This makes you not have to write the same code over and over.

打开/关闭脚本：

 $('.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重新排列：

This could be simplified a bit I'm sure, especially if you were willing to reformat your html a little more, by putting the entry inside of the preview element (but still hidden). Here is a slightly simpler version, with the html rearranged:

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

（我还会在第一行和最后一行元素上着色，这样就可以看到继续）

(I also color the first and last element on the line so you can see what is going on)

这篇关于获取浮动div的一行中的最后一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！