jQuery цикл через каждый div

Question

Я почти уверен, что это будет действительно простой ответ для вас, jQuery whizzes, и я также довольно уверен, что в нем есть какой-то цикл.вычисление по двум отдельным элементам div, но присвоение различного значения ширины CSS для каждого идентификатора на основе количества найденных изображений.Расчеты, которые я выполняю, на самом деле не имеют отношения к моей проблеме, но я все равно их вставляю, потому что это фактический код, с которым я работаю.1007 * Ниже приведен мой текущий jQuery, который отлично работает, но он неэффективен, потому что мне приходится писать еще один кусок кода для каждого добавленного div.Как я могу стандартизировать это так, чтобы оно проходило через каждый div с классом target?Спасибо

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

Answer 1

Как это:

$(".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) относится к току .target, который будет проходить через петлю. В этом .target я ищу .scrolling img и получаю ширину. А потом продолжай идти ...

Изображения различной ширины

Если вы хотите рассчитать ширину всех изображений (если они имеют разную ширину), вы можете сделать это следующим образом:

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

Answer 2

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

Здесь вы перебираете все свои div с классом target и выполняете вычисления.В этом цикле вы можете просто использовать $(this), чтобы указать текущий выбранный тег <div>.

Answer 3

Вы правы, что он включает цикл, но, по крайней мере, это делается простым использованием метода 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));

    });

Ссылки:

• css().
• each().
• find().

Answer 4

Так же, как мы говорим scrolling класс

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

Answer 5

А как же .each()?

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