Jquery - Container dynamisch skalieren DIV-Container, wenn ein anderer DIV geladen wird

Question

Wie kann ich die Breite mit Jquery eines DIV-Containers ändern, wenn ein anderer DIV geladen wird (via PHP)?

Das ist mein HTML-Code

<div id="container"> 
    <div class="item"> Content 1 </div> 
</div> 

Jetzt habe ich ein dinamically den "Container" für jede Seite zu füllen. Eine andere Seite kann HTML-Code haben

<div id="container"> 
    <div class="item"> Content 1 </div> 
    <div class="item"> Content 2 </div> 
    <div class="item"> Content 3 </div> 
</div> 

"item" hat float: left; Ich möchte alle "Elemente" in einer Reihe. Wie kann ich die "Container" -Breite dynamisch ändern, wenn ein "Element" darin geladen wird?

Ich verwende ein Scrollbar Jquery-Plugin, um divs zu scrollen.

Bitte, helfen!

Answer 1

brauchst du sowas?

$(document).ready(function(){ 
    var youtWidth = 100; 
    $('#container').width($('#container .item').length * yourWidth); 
}) 

Dies zählt die Elemente innerhalb des #container und legen Sie #container Breite auf ein Vielfaches der Anzahl der Elemente. In diesem Beispiel behalte ich 100px für jedes Element.

Fabio

Answer 2

Sie konnten die Breite der Kinder berechnen und die Gesamtzahl auf den Behälter, wie dies gilt:

var contentWidth = 0; 

$('#container .item').each(function() { 
    // outerWidth(true) includes margins 
    contentWidth += $(this).outerWidth(true); 
}); 

$('#container').width(contentWidth); 

Demo: http://jsfiddle.net/jtbowden/SQASY/

---

Oder mit einigen grundlegenden CSS, könnten Sie vermeiden Sie es mit JavaScript überhaupt:

Demo: http://jsfiddle.net/jtbowden/YBKxn/1/

Answer 3

Wenn die Elemente unterschiedliche Breite haben, können Sie immer tun:

var totalWidth = 0; 
$('#container').children('.item').each(function(){ 
    totalWidth += $(this).outerWidth(); 
}); 

$('#container').width(totalWidth);