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

Lesezeit: 6 Minuten

Holen Sie sich das letzte Div in einer Reihe von
Jens Draser-Schieb

Ich habe eine Reihe von Divs, die in mehreren Reihen schweben. Die Divs enthalten Textvorschauen und einen Link, um den gesamten Inhalt herunterzuschieben (siehe http://jsfiddle.net/yDcKu/ zum Beispiel).

Was nun passiert: Wenn Sie das Inhalts-Div nach unten schieben, öffnet es sich direkt nach der verbundenen Vorschau. Was ich tun möchte: Öffnen Sie das content-div nach dem letzten Div in der Zeile.

Ich gehe davon aus, dass dies getan werden könnte durch:
1. herausfinden, welches div das letzte in der Zeile der aktivierten Vorschau ist,
2. füge diesem Div eine ID hinzu und
3. füge das content-div an dieses div an.

Ich habe eine Lösung für die Schritte 2 und 3 mit jQuery, aber keine Ahnung, wie der erste Schritt ausgeführt wird. Ich kann die Dokumentbreite und den x- und y-Wert jedes Divs ermitteln, aber ich habe keine Ahnung, wie ich herausfinden kann, welches Div den höchsten x- sowie den höchsten y-Wert hat und sich in der Reihe befindet die aktivierte Vorschau-Div.

Jemand eine Idee? Danke

  • mit aktivierter Vorschau meinst du vermutlich “einige Vorschautext …” oder meinst du das div, das beim Klicken auf … angezeigt wird?

    – Paul Sullivan

    23. März ’12 um 21:10 Uhr


  • Das letzte Element in einer Floating-Reihe hängt von der Breite Ihres Containers ab. Möchten Sie, dass dies auch korrekt ist, nachdem sich die Größe Ihres Containers geändert hat?

    – Jeff B

    23. März ’12 um 21:20 Uhr

  • @Jeff: Das wäre perfekt.

    – Jens Draser-Schieb

    23. März ’12 um 21:42

  • @Paul: Mit “Vorschau aktivieren” meine ich das Div, das den vollständigen Inhalt öffnet, richtig.

    – Jens Draser-Schieb

    23. März ’12 um 21:43

  • Ich glaube, ich verstehe die Idee und habe deine Geige angepasst – siehe jsfiddle.net/DGcu8/2

    – Paul Sullivan

    23. März ’12 um 21:52


1641733293 69 Holen Sie sich das letzte Div in einer Reihe von
Jeff B

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

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

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

Grundsätzlich geht das Skript bei der Größenänderung des Fensters durch und findet die erste Vorschau in jeder Zeile, indem es die Vorschau mit dem gleichen linken Versatz wie die allererste findet. Es fügt dann eine Klasse hinzu last zum Eintrag davor (vorherige Zeile) und Klasse first zu dieser Vorschau. Ich mache CSS clear: left auf beiden, damit beim Öffnen der Einträge alles normal umbrochen wird.

Ich habe Ihren Code generisch gemacht, 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>

Dadurch müssen Sie nicht immer den gleichen Code schreiben.

Das Skript zum Öffnen/Schließen:

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

Dies könnte sicherlich ein wenig vereinfacht werden, insbesondere wenn Sie bereit wären, Ihr HTML ein wenig mehr neu zu formatieren, indem Sie den Eintrag in das Vorschauelement einfügen (aber immer noch ausgeblendet). Hier ist eine etwas einfachere Version mit neu angeordnetem HTML:

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

(Ich färbe auch das erste und letzte Element auf der Linie ein, damit Sie sehen können, was los ist)

  • Vielen Dank Jeff, genau das habe ich gesucht. Ich verstehe grundsätzlich, was da vor sich geht, bekomme es aber irgendwie nicht live auf meiner Seite zum Laufen: Die Einträge werden nicht wie vermutet ausgeblendet. Haben Sie eine Idee, was das Problem sein könnte? Ich habe überprüft, ob alle Klassen usw. passen, aber etwas scheint zu fehlen. Hier sind meine Links zu den Testseite und das HTML.

    – Jens Draser-Schieb

    26. März ’12 um 10:49

  • Sie müssen hinzufügen display: none zu Ihrer Nachrichtenklasse in Ihrem Stylesheet.

    – Jeff B

    26. März ’12 um 16:58 Uhr


Sie könnten nach dem Aufrufen einfach das letzte div im Array abrufen getElementsByTagName.

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

  • Danke, Jeffry! Ich bin mir nicht sicher, ob etwas fehlt, aber ich bekomme das nicht richtig zum Laufen. Wenn ich dieses vor dem jQuery slideDown kopiere, funktioniert das slideDown nicht mehr. Wenn ich es danach kopiere passiert nichts. Übersehe ich etwas?

    – Jens Draser-Schieb

    23. März ’12 um 21:41

  • wrapperDiv existiert nicht; Ich habe diese Variable nur erstellt, weil ich nicht sicher war, welches Div Sie verwenden, um andere Divs zu enthalten.

    – Jeffrey Sweeney

    23. März ’12 um 21:44

Ich kann Ihre Frage nicht richtig verstehen, aber wenn Sie das letzte div-Element im Dokument herausfinden möchten, können Sie so etwas tun

$("div:last")

Damit erhalten Sie das letzte div des Dokuments

Bezug:

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

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

Ich habe das gleiche Problem wie du und wurde auf diese Frage umgeleitet. Aber ich denke, die Antwort ist für meine Bedürfnisse zu kompliziert. Also ging ich meinen eigenen Weg. Angeblich erhalten Sie Ihre Div-Liste aus einem JSON, Sie können dies tun:

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

Aber Sie können es auch herausfinden, indem Sie alle IDs in Ihrem Wrapper sammeln.

Es funktioniert, indem es die Zeilenposition der nächsten ID scannt und die letzte ID derselben Zeile zurückgibt.

Ich suchte nach dem gleichen, aber nach einem einzigen Element, um dem ersten und letzten Element einen Stil hinzuzufügen. @Jeff B Antwort hat mir geholfen, sie so zu ändern und für mich auf einem Element zu verwenden. Also die Suchphrase ‘Get the last div in a row of Floating Divs’ und jemand, der nach demselben sucht, dieser Code kann hilfreich sein:

Geige: 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-Code:

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

.

211970cookie-checkHolen Sie sich das letzte Div in einer Reihe von schwebenden Divs

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy