Ajax Loop ile Div Sınıfı Ekleme

Question

Bir XML dosyasını okuyan ve her düğümün bir div içindeki kimliğini "bağlantılar" olan bir Ajax komut dosyasına sahibim. Komut tamam çalışıyor, ancak her sonucu bir "col-md-3" sınıfında görüntülemek istiyorum.

$(xml).find('ref').each(function() { 
    // set thumbs and big image paths 
    var thumbUrl = 'img/thumbs/'; 
    var bigUrl = 'img/'; 

    $('<a />') 
    .append($('<img>').prop('src', thumbUrl + img).attr('alt', alt)) 
    .prop('href', bigUrl + img) 
    .prop('title', title) 
    .prop('alt', alt) 
    .attr('data-gallery', '') 
    .appendTo($('#links')); 
}); 

sonuç şöyle:

<div id="links"> 
    <a href="img/apple.jpg" title="Apple" data-gallery=""> 
    <img src="img/thumbs/apple.jpg" alt="Apple"></a> 

    <a href="img/orange.jpg" title="Orange" data-gallery=""> 
    <img src="img/thumbs/orange.jpg" alt="Orange"></a> 
</div> 

bir sütun sınıf içinde her resim bağlantıyı görüntülemek istiyorum

"sütun-MD- İşte

Ajax komut döngü var 3" böyle:

<div id="links"> 
    <div class="col-md-3"> 
    <a href="img/apple.jpg" title="Apple" data-gallery=""> 
    <img src="img/thumbs/apple.jpg" alt="Apple"></a> 
    </div> 

    <div class="col-md-3"> 
    <a href="img/orange.jpg" title="Orange" data-gallery=""> 
    <img src="img/thumbs/orange.jpg" alt="Orange"></a> 
    </div> 
</div> 

Answer 1

deneyin sarma

$('#links a').wrap('<div class="col-md-3">'); 

https://jsfiddle.net/xwLmm1d0/1/

Answer 2

Ben DOM'ye takmadan önce tam bir HTML kodu oluşturmak olacaktır. Bu kaynak tasarrufu, aynı zamanda aslında eklemek görebilirsiniz: this Fiddle üzerine de

xml = $.parseXML('<ref img="350x150" alt="Alt 1" title="Title 1"></ref>'); 
 

 
var newItemHtml = ''; 
 
var thumbUrl = 'https://placehold.it/'; 
 
var bigUrl = 'https://placehold.it/'; 
 
var links = $('#links'); 
 

 
$(xml).find('ref').each(function(i) { 
 
    var thisRef = $(this); 
 
    var src = thumbUrl + thisRef.attr('img'); 
 
    var href = bigUrl + thisRef.attr('img'); 
 
    var alt = thisRef.attr('alt'); 
 
    var title = thisRef.attr('title'); 
 
    newItemHtml += '<div class="col-md-3">\n'; 
 
    newItemHtml += ' <a href="' + href + '" title="' + title + '" data-gallery="">\n'; 
 
    newItemHtml += '  <img src="' + src + '" alt="' + alt + '">\n'; 
 
    newItemHtml += ' </a>\n'; 
 
    newItemHtml += '</div>\n'; 
 
}); 
 

 
links.append(newItemHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="links"></div>

.