jQuery從一個位置提取html代碼並將其放置在另一個位置

Question

我試圖操縱一個橫幅滑塊，它將從所有橫幅中提取所有DOM呈現的img標記 - 第一個除外 - 然後將它們重新裝入一個通過一個設置超時在一個時間以幾秒爲增量超時。由於圖片的數量/大小，我只是想盡量避免頁面加載。

我的問題是，我似乎無法得到如果語句來繞過img標籤的第一個實例，並刪除其他人。它的全部或沒有，所以我認爲img [0]可能不正確。我也曾嘗試。首先（）沒有運氣，也CSS' 第一胎 & 第n個孩子（1）。我也嘗試用img標籤html創建一個新數組，然後繼續...但是這證明沒有好的要麼。

任何想法，我可以得到這個去嗎？如果你們都有更好的方法，我很樂意提供建議。

謝謝。

var img = $('div > img'); 
 
$.each(img, function(i) { 
 
    if (!img[0]) { 
 
    img.remove(); 
 
    setTimeout(function(){ 
 
     $('.main').append(img); 
 
    }, i * 2000); 
 
    } 
 

 
});

.main { 
 
    width: 200px; 
 
    height: 80px; 
 
    padding: 10px; 
 
    overflow: visible; 
 
    border: 2px solid red; 
 
} 
 
.div1, 
 
.div2, 
 
.div3 { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: #ccc; 
 
    float: left; 
 
    position: absolute; 
 
} 
 
.div2 {left:232px;} 
 
.div3 {left:437px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
     
 
    <div class='div1'> 
 
     <img src="#" alt=""> 
 
    </div> 
 
    <div class='div2'> 
 
     <img src="#" alt=""> 
 
    </div> 
 
    <div class='div3'> 
 
     <img src="#" alt=""> 
 
    </div> 
 

 
</div>

Answer 1

好像你正在談論延遲加載。看看lazysizes，他們有一個演示鏈接。