解析XML並在每3個元素中添加HTML

Question

我正在處理3列照片網站（響應式），並且我正在從XML解析img src。

我需要每3個元素預先附加一個HTML代碼，以便我的照片牆尊重我的自適應類。

我剛找到一個便宜的解決方案，重複xml循環（for）。

您有任何建議給我，做對了嗎？

感謝

這是我的代碼：

$(document).ready(function(){ 
xmldata=new Array();  //initialise array for XML data 
$.ajax({      //get the XML data 
    url: "xml/gallery.xml",    //URL to get the data from 
    success: function(data) {   //if we succeed, set everything up. We don't expect failure. 
     $(data).find("image").each(function() 
    { 
     xmldata.push($(this));  //add item into array 
    }); 


    totalNum = xmldata.length; 

    gallery_images();    

    } 


    }); 

}); 






function gallery_images(){ 

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

data=xmldata[i];   

img_src=$(data).attr("src");   
href=$(data).attr("href"); 
title1=$(data).attr("title1"); 
client=$(data).attr("client"); 





    var video_gallery_html = ''; 
    video_gallery_html += '<article class="col span_8"><div class="title_div span_24 ">'; 
    video_gallery_html += ' <a href="#"> <img src="images/linea.png" alt="line_divisor" /></a>'; 
    video_gallery_html += ' <h1 class="title_item col span_12 _left">DENIS ROVIRA</h1>'; 
    video_gallery_html += ' <h3 class="title_more col span_12 _right">See all projects</h3></div><!-- title_div -->'; 
    video_gallery_html += ' <a href="#"> <img src="'+ img_src +'" alt="image_item" /></a>'; 
    video_gallery_html += ' <p>Nescafe Gold</p></article><!-- span_8 -->'; 


    $(".videos_container").prepend(video_gallery_html); 




}; 


    for (var i = 3; i <= 5; i++) { 

    data=xmldata[i];   

    img_src=$(data).attr("src");   
    href=$(data).attr("href"); 
    title1=$(data).attr("title1"); 
    client=$(data).attr("client"); 




    var video_gallery_html2 = ''; 
    video_gallery_html2 += '<article class="col span_8"><div class="title_div span_24 ">'; 
    video_gallery_html2 += ' <a href="#"> <img src="images/linea.png" alt="line_divisor" /></a>'; 
    video_gallery_html2 += ' <h1 class="title_item col span_12 _left">DENIS ROVIRA</h1>'; 
    video_gallery_html2 += ' <h3 class="title_more col span_12 _right">See all projects</h3></div><!-- title_div -->'; 
    video_gallery_html2 += ' <a href="#"> <img src="'+ img_src +'" alt="image_item" /></a>'; 
    video_gallery_html2 += ' <p>Nescafe Gold</p></article><!-- span_8 -->'; 


    $(".videos_container2").prepend(video_gallery_html2); 




}; 


} 

Answer 1

你可以做一個正常的for遍歷您的數組。使用模數運算符%來確定您當前是否在正確的位置並輸出HTML。

for(var i=0; i<totalNum; i++) { 
    if(i % 3 == 2) { 
     // render your seperator HTML 
    } 
    // render your image 
} 

如果你需要用你的元素在一個新的節點，每3你可以做這樣的事情：

var section; 
for(var i=0; i<totalNum; i++) 
{ 
    if(i % 3 == 0) { 
     section = $("<section/>").appendTo(".video_container"); 
    } 
    var video_gallery_html = ''; 
    .... 
    section.append(video_galler_html); 
}