Get the last div in a row of floating divs

Question

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

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.

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.

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.

Any idea anyone? Thanks

Answer 1

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.

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.

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.

The open/close script:

 $('.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();
});

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)

Answer 2

$([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 3

I got same problem as yours, and I have been redirected to this question. But I think the answer is too complicated to my need. So I made my own way. Supposedly, you get your div list from a JSON, you can do this:

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

But you can also find out by gathering all id inside your wrapper.

It works by scanning next id's row position, and return the last id of the same row.

Answer 4

You could just get the last div in the array after calling getElementsByTagName.

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

Answer 5

I was looking for the same but on a single element to add style on first and last elements. @Jeff B answer helped me so alter and use it for me on one element. So the search phrase 'Get the last div in a row of floating divs' and someone looking for the same, this code may helpful:

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

Answer 6

i am not able to correctly understand your question, but if you want to find out last div element in the document then you can do something like this

$("div:last")

so this will give you last div of the document

Reference:

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