jQuery Boucle sur chaque div

Je suis sûr que ce sera vraiment une réponse facile pour vous de jQuery génies, et je suis aussi assez telle, elle implique une boucle d'une certaine sorte.

Je suis en train de réaliser essentiellement le même calcul sur deux divs, mais l'affectation d'une autre feuille de style CSS valeur de la largeur de chaque id basé sur le nombre d'images trouvées. Les calculs que j'effectue ne sont pas pertinents à mon problème, mais je les mets quand même parce que c'est le code que je travaille avec.

Voici le balisage...

<div id ='test1' class='target'>
  <div class='scrolling'>
    <img/>
    <img/>
    <img/>
  </div>
</div>

<div id ='test2' class='target'>
  <div class='scrolling'>
    <img/>
    <img/>
    <img/>
  </div>
</div>

Ci-dessous est mon jQuery qui fonctionne très bien, mais il est inefficace parce que je dois écrire un autre bloc de code pour chaque div ajouté. Comment puis-je régulariser cette sorte qu'elle s'exécute à travers tous les div avec la classe de la cible? Grâce

/* Measure the width of each image. */
test1 = $('#div1 .scrolling img').width();
test2 = $('#div2 .scrolling img').width();

/* Find out how many images there are. */
test1img = $('#div1 .scrolling img').length;
test2img = $('#div2 .scrolling img').length;

/* Do the maths. */
final1 = (test1 * test1img)*1.2;
final2 = (test2 * test2img)*1.2;

/* Apply the maths to the CSS. */
$('#div1 .scrolling').width(final1);
$('#div2 .scrolling').width(final2);

Je ne suis pas sûr que vous devez faire ce calcul. Avez-vous essayé de le résoudre avec de la pure CSS?

OriginalL'auteur SparrwHawk | 2012-01-02

jquery loops

37

Comme ceci:
```
$(".target").each(function(){
    var images = $(this).find(".scrolling img");
    var width = images.width();
    var imgLength = images.length;
    $(this).find(".scrolling").width( width * imgLength * 1.2 );
});
```
La $(this) fait référence à l'actuel .target qui sera bouclé. Dans ce .target je suis à la recherche pour le .scrolling img et obtenir la largeur. Et on continue...

Images avec différentes largeurs de

Si vous voulez calculer la largeur de toutes les images (quand ils ont des largeurs différentes), vous pouvez le faire comme ceci:
```
//Get the total width of a collection.
$.fn.getTotalWidth = function(){
    var width = 0;
    this.each(function(){
        width += $(this).width();
    });
    return width;
}

$(".target").each(function(){
    var images = $(this).find(".scrolling img");
    var width = images.getTotalWidth();
    $(this).find(".scrolling").width( width * 1.2 );
});
```
$(this).find(".scrolling img") retourne une collection d'éléments qui correspondent.
Vrai, mais le démarreur sayd son code fonctionne, et je suis actuellement a seulement ajouté la boucle, il doit donc être encore au travail. Donc, jQuery va juste prendre la première IMG il peut trouver et qui renvoie la largeur.
oui, c'est fait. Mais width() retourne seulement la largeur de la premier élément du tableau de correspondance des éléments.
Ok, juste pour dire que rien ne dit que toutes les images ont la même largeur, mais peut-être qu'ils font.
Wow, une foule de réponses ici. Niel, votre solution a très bien fonctionné, mais je suis intéressé par David commentaire - c'est peut-être une erreur de mon code d'origine. Que faire si j'ai des images de différentes tailles .div défilement? Comment puis-je m'assurer qu'il calcule la largeur totale? Tx

OriginalL'auteur Niels

Vous avez raison en ce qu'il comporte une boucle, mais c'est, au moins, grâce à l'utilisation de la each() méthode:

$('.target').each(
    function(){
        //iterate through each of the `.target` elements, and do stuff in here
        //`this` and `$(this)` refer to the current `.target` element
        var images = $(this).find('img'),
            imageWidth = images.width(); //returns the width of the _first_ image
            numImages = images.length;
        $(this).css('width', (imageWidth*numImages));

    });

Références:

OriginalL'auteur David Thomas

$('div.target').each(function() {
   /* Measure the width of each image. */
   var test = $(this).find('.scrolling img').width();

   /* Find out how many images there are. */
   var testimg = $(this).find('.scrolling img').length;

   /* Do the maths. */
   var final = (test* testimg)*1.2;

   /* Apply the maths to the CSS. */
   $(this).find('scrolling').width(final); 
});

Ici vous parcourir l'ensemble de votre div avec la classe cible et que vous faites les calculs. Dans cette boucle, vous pouvez simplement utiliser $(this) pour indiquer sélectionné <div> tag.

OriginalL'auteur Jules

0

Ce sujet .each()?

http://api.jquery.com/each/

OriginalL'auteur sascha

Tout comme nous nous référons à scrolling classe

$( ".scrolling" ).each( function(){
    var img = $( "img", this );
    $(this).width( img.width() * img.length * 1.2 ) 
})

OriginalL'auteur abuduba

Vous devez vous connecter pour publier un commentaire.