Berechne die Gesamtbreite von Kindern mit jQuery

Ich habe versucht, eine verständliche Antwort darauf zu finden, aber aufgegeben.Berechne die Gesamtbreite von Kindern mit jQuery

Um dymnamic Inhalt (wie Blog-Posts und Bilder) in einer horizontalen Website (wie auf thehorizontalway.com) haben Sie eine feste Breite für den Körper in pixles setzen müssen, nicht wahr? Da Sie floated Elemente darin verwenden, die andernfalls die Seite brechen und umhüllen würden, abhängig von der Breite des Browsers.

BEARBEITEN! Dieser spezifische Wert kann berechnet werden mit jQuery, danke dafür :) In diesem Beispiel wird ein zusätzlicher Wert zur Gesamtgröße hinzugefügt, der für Inhalt vor den Floated-Elementen verwendet werden kann. Jetzt bekommt der Körper eine dynamische Breite!

Mein erster Gedanke war, haben jQuery diese Berechnung für uns: ('EACH BEITRÄGE WIDTH' * 'Anzahl der Beiträge') + 250 (für den zusätzlichen Inhalt)

HTML-Code

<body style="width: ;"> <!-- Here we want a DYNAMIC value --> 
<div id="container"> 
    <div id="menu"></div> <!-- Example of extra content before the floats --> 
    <div class="post">Lorem</div> 
    <div class="post">Lorem</div> 
    <div class="post">Lorem</div> <!-- Floated elements that we want the sizes of --> 
    <div class="post">Lorem</div> 
</div> 
... 
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be (300+300+300+500) + 250 [#menu] = 1650px -->

Das Ergebnis und Antwort von Alconja

$(document).ready(function() { 
var width = 0; 
$('.post').each(function() { 
    width += $(this).outerWidth(true); 
}); 
$('body').css('width', width + 250); 
});

Thanks so much!

Quelle

2009-06-18 elundmark

Sieht aus wie Sie es ziemlich viel richtig gemacht haben ... ein paar Notizen aber:

.outerWidth(true) umfasst die Polsterung & Rand (da Sie true vorbei sind), so gibt es keine Notwendigkeit, zu versuchen & fügen Sie das wieder hinzu.
.outerWidth(...) gibt nur die Breite des ersten Elements zurück. Wenn also jedes Element eine andere Größe hat, ist die Multiplikation mit der Anzahl der Beiträge kein genauer Wert für die Gesamtbreite.

In diesem Sinne so etwas wie dieses sollten Sie geben, was Sie nach: Ist

var width = 0; 
$('.post').each(function() { 
    width += $(this).outerWidth(true); 
}); 
$('body').css('width', width + 250);

, die helfen, (Ihr 250 anfängliche Polsterung zu halten, die ich davon ausgehen, ist für Menüs & Dinge?) oder gibt es ein anderes spezifisches Problem, das Sie haben (war nicht ganz klar von Ihrer Frage)?

Quelle

2009-06-18 23:50:30 Alconja

Ehrfürchtig, das war genau das, was ich meinte. Ich werde die Frage später bearbeiten, damit es klarer wird, worüber ich gesprochen habe. Wie du gesagt hast, der Code hatte ich nur die erste .post und berechnet den Rest durch Multiplikation mit .size() - das macht es so viel einfacher, eine horizontale Scroll-Seite zu machen, die Breite des Körpers dynamisch pro Seite :) Just braucht etwas Noscript Super-Body-Breite hinzugefügt und es ist fertig. – elundmark

+1 Danke, sparte mir Zeit. – 472084

D: WAS !! DIESE EXISTEN!?!?! Ich habe outerWidth() seit Monaten neu erstellt !!! –

Sie können die Breite mit diesem Einstrich berechnen, wenn auch ein bisschen länger als ich es mir gewünscht hätte.

var width = $('.post').map(function(undefined, elem) { 
    return $(elem).outerWidth(true); 
}).toArray().reduce(function(prev, curr) { 
    return prev + curr; 
}, 0);

Quelle

2016-06-17 00:02:58 smac89

Berechne die Gesamtbreite von Kindern mit jQuery

Antwort

Verwandte Themen