Holen Sie sich das letzte Div in einer Reihe von schwebenden divs

Question

Ich habe eine Reihe von divs in mehreren Reihen schweben. Die divs enthalten Text-Previews und einen Link, um den gesamten Inhalt nach unten zu verschieben (siehe http://jsfiddle.net/yDcKu/ für ein Beispiel).

Was passiert jetzt: Wenn Sie das Inhalts-Div nach unten rutschen, öffnet es sich direkt nach der verbundenen Vorschau. Was ich möchte: Öffnen Sie das Content-Div nach dem letzten Div in der Zeile.

Ich nehme an, die durch getan werden könnte:
1. die div erfahren Sie die letzte in der Reihe der aktivierten Vorschau ist,
2. eine ID zu diesem div hinzufügen und
3. Fügen Sie den Inhalt -div zu diesem div.

Ich habe eine Lösung für die Schritte 2 und 3 mit jQuery aber nicht raten, wie man den ersten Schritt macht. Ich kann es schaffen, die Dokumentbreite und den x- und y-Wert jedes div zu bekommen, aber ich habe keine Ahnung, wie div den höchsten x- sowie den höchsten y-Wert hat und auch in der Zeile der aktivierten Vorschau-div.

Irgendeine Idee jemand? Danke

Answer 1

Hier ist ein Beispiel, das tut, was Sie wollen. Ich habe Ihren Code vereinfacht, sodass Sie nicht jeden Eintrag und jede Vorschau manuell erfassen müssen.

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

Es ist ein wenig kompliziert. Lass es mich wissen, falls du fragen hast.

Wenn das Fenster in der Größe geändert wird, durchläuft das Skript grundsätzlich die erste Vorschau in jeder Zeile, indem es die Vorschau mit dem gleichen linken Versatz wie die aller erste Zeile findet. Es fügt dann eine Klasse last zu dem Eintrag vor (vorherige Zeile) und Klasse first zu dieser Vorschau hinzu. Ich tue css clear: left auf beiden von diesen, so dass alles normal verpackt, wenn die Einträge geöffnet werden.

Ich habe Ihren Code generic, ohne 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> 

Das macht Sie den gleichen Code immer und immer wieder nicht zu schreiben.

Das Öffnen/Schließen Skript:

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

Dieses ein wenig vereinfacht werden könnte ich bin sicher, vor allem, wenn Sie bereit sind, Ihre HTML, ein wenig mehr zu formatieren, indem innerhalb des Vorschau Element den Eintrag setzen (aber immer noch versteckt). Hier ist eine etwas einfachere Version, mit der html neu geordnet:

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

(I Farbe auch das erste und das letzte Element auf der Linie, damit Sie sehen, was los ist)

Answer 2

Sie konnten gerade das letzte div im Array nach dem Anruf getElementsByTagName erhalten.

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

Answer 3

ich bin nicht in der Lage, richtig verstehe Ihre Frage, aber wenn Sie das letzte Mal div Element im Dokument herausfinden möchten, dann können Sie so etwas wie dieses

$("div:last") 

tun dies wird Ihnen zuletzt div des Dokuments

Referenz:

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/