获取浮动div中的最后一个div

Question

我有几行div浮动。 div包含文本预览和用于向下滑动整个内容的链接（有关示例，请参阅http://jsfiddle.net/yDcKu/）。

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

我认为可以通过以下方式完成： 1.找出哪个div是激活预览行中的最后一个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/

（我也为线上的第一个和最后一个元素着色，这样你就可以看到发生了什么）

Answer 2

调用getElementsByTagName后，你可以得到数组中的最后一个div。

var divArray = wrapperDiv.getElementsByTagName("div");
if(divArray.length > 0)
    var lastDiv = divArray[divArray.length-1];
else
    console.log("Empty!");

Answer 3

我无法正确理解您的问题，但如果您想查找文档中的最后一个div元素，那么您可以执行类似这样的操作

$("div:last")

所以这将给你文件的最后一个div

参考：

http://api.jquery.com/last-selector/

Answer 4

$([1,2]).each(function(idx,el) {
 $("#entry" + el).hide().insertAfter("div.entry:last");
 $("#trigger" + el).click(function() {
     $("#entry" + el).slideDown('800');
 });   
 $("#close" + el).click(function() {
     $("#entry" + el).slideUp('800');
 });            
});​

http://jsfiddle.net/yDcKu/11/

Answer 5

我和你的问题一样，我被重定向到了这个问题。但我认为答案太复杂了我的需要。所以我走自己的路。据说，你从JSON获得你的div列表，你可以这样做：

product[0] = {id: "name1", text: "text1"}
product[1] = {id: "name2", text: "text2"}
product[2] = {id: "name3", text: "text3"}

private getLastElement(id, products) {
    const getTop = (id) => $("#" + id).position().top;
    let itemPos = getTop(id);
    let itemIndex = products.map(x => x.id).indexOf(id);
    let lastID = itemIndex;
    while (lastID < products.length - 1) {
        if (getTop(products[lastID + 1].id) > itemPos) break;
        lastID++;
    }
    return products[lastID].id;
}

但是你也可以通过收集包装器中的所有id找到答案。

它的工作原理是扫描下一个id的行位置，并返回同一行的最后一个id。

Answer 6

我正在寻找相同但在单个元素上添加第一个和最后一个元素的样式。 @Jeff B回答帮助我改变并在一个元素上使用它。因此，搜索短语'获取浮动div中的最后一个div'以及寻找相同内容的人，此代码可能有用：

小提琴：https://jsfiddle.net/kunjsharma/qze8n97x/2/

JS：

$(function() {
    $(window).on('resize', function() {
        var startPosX = $('.preview:first').position().left;
        $('.preview').removeClass("first last");
        $('.preview').each(function() {
            if ($(this).position().left == startPosX) {
                $(this).addClass("first");
                $(this).prevAll('.preview:first').addClass("last");
            }
        });
        $('.preview:last').addClass("last");
    });
    $(window).trigger('resize');
});

CSS：

.preview {
    float: left;
}

HTML：

<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>