Domanda jQuery Loop attraverso ogni div


Sono abbastanza sicuro che questa sarà una risposta davvero facile per te, i whites di jQuery, e sono anche abbastanza gentile da coinvolgere un loop di qualche tipo.

Sto cercando di eseguire essenzialmente lo stesso calcolo su due div separate, ma assegnando un valore di larghezza CSS diverso a ciascun ID in base al numero di immagini trovate. I calcoli che sto eseguendo sono irrilevanti per il mio problema, ma li inserisco comunque perché è il codice con cui sto lavorando.

Ecco il markup ...

<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>

Di seguito è il mio jQuery corrente, che funziona bene, ma è inefficiente perché devo scrivere un altro pezzo di codice per ogni div aggiunto. Come posso standardizzare questo in modo che passi attraverso ogni div con la classe di target? Grazie

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

10
2018-01-02 13:51


origine


risposte:


Come questo:

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

Il $(this) si riferisce alla corrente .target che verrà ripetuto. All'interno di questo .target Sto cercando il .scrolling img e ottenere la larghezza. E poi continua ...

Immagini con diverse larghezze

Se vuoi calcolare la larghezza di tutte le immagini (quando hanno diverse larghezze) puoi farlo in questo modo:

// 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 );
});

35
2018-01-02 13:54



Hai ragione che si tratta di un ciclo, ma questo è, almeno, reso semplice dall'uso del each() metodo:

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

    });

Riferimenti:


1
2018-01-02 13:54



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

Qui fai un giro tra tutte le div con classe bersaglio e tu fai i calcoli. All'interno di questo ciclo puoi semplicemente usare $(this) per indicare il attualmente selezionato <div> etichetta.


1
2018-01-02 13:56



Che dire .each()?

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


0
2018-01-02 13:55



Proprio come ci riferiamo a scrolling classe

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

0
2018-01-02 14:13