Что происходит в этом Javascript-коде (строка за строкой)?

Question

Я все еще изучаю JS и искал, чтобы построить карусель сетки/миниатюр и нашел этот кусок кода. Это поведение действительно странно, поскольку оно отображает 3 одного изображения в строке (например, изображение 1 появляется 3 раза, прежде чем изображение 2 отображается 3 раза и т. Д.). Я пытаюсь понять, что происходит в каждой строке, и надеялся, что кто-то поможет мне сломать то, что происходит в каждой строке?

Вот код:

$('.carousel[data-type="multi"] .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    for (var i=0;i<1;i++) { 
     // next=next.next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 

     next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

Вот что я думаю, что происходит в каждой строке:

1. Создание функции, которая применяется к каждому элементу в карусели

2. объявляющего следующий как переменная (я читал об использовании этого вчера, но мне все еще не ясно, что он делает - применимо только к каждому изменяемому объекту)

3. проверить, если следующие элементы существуют, и если они делают

4. затем сделать следующий братьев и сестер первого селектора?

5. объявление следующих детей как что-либо, что приходит после первого ребенка, и добавить это к переменной/объекту this?
6. для цикла, где, если условие выполняется
7. не слишком уверен, что означает, что эта линия
8. если следующая длина существует
9. то следующий будет равных объектов братьев и сестер первого селектора (почему это повторяется в течение для цикла когда было упомянуто за его пределами?)
10. не слишком уверен, почему это повторяется снова тоже?

Любая помощь будет очень признательна! Благодаря!

Answer 1

Здесь идет:

$('.carousel[data-type="multi"] .item') 

найти все элементы с классом carousel и типа данных = "мульти", например , а затем найти все элементы с классом itemв пределах .carousel

.each(function(){ 

петля над каждым из этих предметов, this = каждый элемент

var next = $(this).next(); 

найти элемент, который непосредственно после .item - понятия не то, что это может быть, как вы не включили HTML

if (!next.length) { 
    next = $(this).siblings(':first'); 
} 

если this был последний брат, а затем получить первый родственный, то есть снова начать в начале

Если у карусели был только один элемент, тогда это будет теперь указывать на .item (это) в вышеуказанном цикле.

next.children(':first-child').clone().appendTo($(this)); 

найти первый ребенок рядом, скопируйте его (клон) и добавить его в качестве потомка текущего .item

for (var i=0;i<1;i++) { 

множеств я = 0, но в остальном ничего не делает (петли я от 0 до 0), я не используется, это не делает ничего

// next=next.next(); 

перейти к следующему пункту после предыдущего next=

if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 

же проверить, как и раньше, что не имеет никакого смысла, так как рядом был бы установлен на первом собрата, так что ничего не делает - это имело бы смысл, если бы вы держали в next=next.next(); к петле обратно к началу

next.children(':first-child').clone().appendTo($(this)); 

повторяет предыдущий клон

Именно поэтому вы получаете 3 изображения - есть (вероятно, нет данных html) только один .item и две строки кода, чтобы скопировать его самому себе.