此Javascript代碼中發生了什麼（逐行分解）？

我仍然在學習JS，並且正在尋找構建網格/縮略圖旋轉木馬並找到這段代碼。它的行爲真的很奇怪，因爲它在一行中顯示3個相同的圖像（例如，在圖像2顯示3次之前圖像1出現3次等）。我試圖理解每一行中發生了什麼，希望有人能幫助我分解每行中發生的事情？此Javascript代碼中發生了什麼（逐行分解）？

下面是代碼：

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

這就是我認爲正在發生的每一行：

創建適用於每一個項目在轉盤
聲明函數接下來作爲一個變量（我昨天讀了關於使用這個，但它仍然不清楚它的作用 - 僅適用於每個可更改的對象？）
檢查，如果下一個元素存在，如果他們這樣做
然後進行下一個第一選擇的兄弟姐妹？
將下一個孩子聲明爲第一個孩子之後的任何東西，並將其添加到變量/對象中？
for循環，其中如果條件滿足
也不太清楚這是什麼線意味着
如果下次長度存在的第一選擇（爲什麼被內重複for循環的
那麼未來將等於對象的兄弟姐妹當它在外面被提及？）
不太確定爲什麼這又被重複呢？

任何幫助將不勝感激！謝謝！

來源

2016-12-15 rubyred2

這裏所說：

$('.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（this）。

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

發現旁邊的第一個孩子，把它複製（克隆），並將其添加爲當前.item的孩子

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

設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和兩行代碼複製到自己。

來源

2016-12-15 16:17:07

此Javascript代碼中發生了什麼（逐行分解）？

回答

相關問題