web-dev-qa-db-fra.com

boucle jQuery à travers chaque div

Je suis sûr que ce sera une réponse très facile pour vous, jQuery whizzes, et je suis aussi jolie que cela implique une boucle quelconque.

J'essaie de faire essentiellement le même calcul sur deux divs distincts, mais en attribuant une valeur de largeur CSS différente à chaque identifiant en fonction du nombre d'images trouvées. Les calculs que j'effectue ne sont vraiment pas pertinents pour mon problème, mais je les ai tout de même, car c'est le code avec lequel je travaille.

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, mon jQuery actuel, qui fonctionne bien, mais qui est inefficace car je dois écrire un autre bloc de code pour chaque div ajoutée. Comment puis-je normaliser cela afin qu'il traverse chaque div avec la classe de cible? Merci

/* 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);
jqueryloops
10
SparrwHawk

Comme ça:

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

$(this) fait référence au .target courant qui sera bouclé. Dans ce .target, je cherche le .scrolling img et la largeur. Et puis continuez ...

Images de différentes largeurs

Si vous voulez calculer la largeur de toutes les images (quand elles 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 );
});
37
Niels

Vous avez raison de dire que cela implique une boucle, mais au moins, cela est simplifié en utilisant la méthode each():

$('.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:

1
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 parcourez toutes vos divisions avec class target et vous effectuez les calculs. Dans cette boucle, vous pouvez simplement utiliser $(this) pour indiquer la balise <div> actuellement sélectionnée.

1
Jules

Comme nous nous référons à la classe scrolling

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

Qu'en est-il de .each()?

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

0
sascha