Ajaxループでdivクラスを追加する

Question

XMLファイルを読み込んで各ノードをIDの「リンク」というdiv内に追加するAjaxスクリプトがあります。スクリプトは正常に動作していますが、各結果をクラス「col-md-3」内に表示したいと思います。ここで

は、Ajaxスクリプトからループです：

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

結果は次のようになります。

<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> 

私は列クラス「COL-MD-内の各画像のリンクを表示したいのですが3" のように：

<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

をラップ試してみてください3210

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

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

Answer 2

私はDOMに挿入する前に、完全なHTMLコードを生成します。これは、資源を節約し、また、あなたが実際にあなたが挿入するものを見ることができます。this Fiddleにも

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>

を。