Javascript 代码中发生了什么（逐行分解）？

Question

我仍在学习 JS 并希望构建一个 grid/thumbnail 轮播并找到了这段代码。它的行为真的很奇怪，因为它连续显示 3 个相同的图像（例如，图像 1 在图像 2 显示 3 次之前出现 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));
    }
});

以下是我认为每一行中发生的情况：

创建适用于轮播中每个项目的函数
将 next 声明为一个变量（我昨天读到过有关使用它的信息，但我仍然不清楚它的作用——只适用于每个可变的 object？）
检查下一个元素是否存在以及它们是否存在
然后让 next 成为第一个选择器的兄弟姐妹？
将下一个 children 声明为第一个 child 之后的任何内容，并将其添加到 variable/object this?
for 循环 where if 条件满足
不太清楚这行是什么意思
如果存在下一个长度
那么 next 将等于第一个选择器的 objects 兄弟姐妹（为什么在 for 循环外提到它时却在 for 循环内重复？）
不太确定为什么还要重复此操作？

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

这里是：

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

查找所有包含 class carousel 和 data-type="multi" 的项目，例如然后找到 class item within .carousel

的所有项目

.each(function(){

遍历每个项目，this = 每个项目

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

找到直接在 .item 之后的元素 - 不知道这可能是什么，因为您没有包含 html

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

如果this是最后一个兄弟，则获取第一个兄弟，即从头开始重新开始

如果 carousel 只有一个项目，那么 this 现在将指向上面循环中的 .item (this)。

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

找到下一个的第一个child，复制（克隆）并添加为当前.item

的child

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

设置 i = 0，但除此之外什么都不做（循环 i 从 0 到 0），i 没有被使用，这什么都不做

    // next=next.next();

移至上一项后的下一项next=

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

与以前相同的检查，这没有意义，因为 next 将被设置为第一个兄弟，所以什么都不做 - 如果你保持 next=next.next(); 循环回到开头，这将是有意义的

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

重复之前的克隆

这就是为什么你得到 3 张图像的原因 - 有（很可能，没有 html 证据）只有一张 .item 和两行代码将其复制到自身。

Javascript 代码中发生了什么（逐行分解）？

What's happening in this Javascript code (line by line breakdown)?

javascript

jquery

carousel