Comment trouver la largeur des éléments intérieurs

Je ne pouvais pas trouver d’autres questions demandant la même chose, bien que cela puisse poser un problème avec la formulation de ma recherche.

J’essaie de comprendre comment trouver la plus grande largeur de tous les éléments contenus dans un div de conteneur avec une largeur fixe. Ainsi, dans l’image ci-dessous, la boîte noire est la div du conteneur avec une largeur fixe. La boîte rouge représente le contenu de la div de conteneur, qui sont sujets à changement. Je veux trouver la largeur de la boîte rouge, en utilisant uniquement la boîte noire en js.

affichage du conteneur div et d'un plus grand div à l'intérieur

Voici un scénario avec ce sur quoi j’ai travaillé / essayé:

http://jsfiddle.net/w87k5/1/

les fonctions jquery actuelles que j’ai essayées, sans succès:

.width(); .innerWidth(); .outerWidth(); .scrollLeft(); 

Note: Je ne sais rien du contenu de ce conteneur. Ils peuvent être n’importe quel élément HTML ou mélange d’éléments HTML, des divs aux imgs aux iframes. Je pourrais mettre une “boîte rouge” sans une largeur fixe les entourant. Le débordement de la boîte noire sera masqué.

Mise à jour: il pourrait y avoir un nombre quelconque d’enfants dans le conteneur. Comme ceci: http://jsfiddle.net/w87k5/3/

Mise à jour 2: Je vais effectuer des tests de vitesse de référence sur toutes les réponses pour voir laquelle est la plus rapide et en sélectionner une après cela. Merci pour tous vos commentaires!

Benchmarks: J’ai généré 1000 divs avec une largeur aléatoire comprise entre 0 et 100, enregistré la Date (). GetTime (), fait le test, puis enregistré à nouveau l’heure. Voici les résultats:

~ 2418 avg. millisecondes avec la boucle for pour la longueur. J’aurais peut-être gâché celui-ci d’une façon ou d’une autre?

 for (var i = 1; i  box){ box = q; } } 

~ 34,4 avg. ms pour la boucle .each.

~ 22,4 avg. ms pour la fonction .map. (Réponse choisie.)

Si vous avez besoin de tous les éléments nesteds, vous pouvez lancer une recherche avec * selector qui retournera tous les éléments descendants:

 var widthArray=$('#box *').map(function(){ return $(this).outerWidth(); }).get(); var maxWIdth= Math.max.apply(Math, widthArray); 

Pour les enfants seulement:

 var widthArray=$('#box').children().map(function(){.... 

Vous pouvez utiliser .each() pour parcourir chaque élément enfant.

exemple jsFiddle

 var widths = []; $('#box').children().each(function(i){ widths[i] = $(this).width(); }); alert(Math.max.apply(Math, widths)); 

Ce qui retournera la largeur de l’élément enfant avec la plus grande largeur.

Obtenez le nombre d’enfants et passez en boucle pour obtenir la largeur de chaque

  $(document).ready(function () { var count = $("#box").children().length; var h = 0; for (var i = 1; i <= count; i++) { max = $("#box :nth-child(" + i + ")").width(); var h = Math.max(max, h); } alert(h); }); 

http://jsfiddle.net/JDVN3/1/

Veuillez noter que l'index commence à 1 et non à 0.

Découvrez: http://api.jquery.com/nth-child-selector/