0

プロジェクトに JSON ファイルを介したループがあります。そこから画像の href と src を取得します。しかし、次のような特定の方法でこれを出力する必要があります。

<li>
    <a href="link1_fromJSON.HTML" data-transition="slidedown">
        <img src="image_1_fromJSON.jpg"/>
        <h3> Menu1</h3>
    </a></li>
<li>
    <a href="link2_fromJSON.HTML" data-transition="slidedown">
       <img src="image_2_fromJSON.jpg"/>
       <h3> Menu2</h3>
   </a>
</li>
<li>
    <a href="link_3_fromJSON.HTML" data-transition="slidedown">
        <img src="image_3_fromJSON.jpg"/>
        <h3> Menu3</h3>
    </a>
<li>

ここに私のJavaScriptコードがあります:

$.each(data.posts, function(index, d){
$("<li>", { html:'<img src="' + d.thumbnail_images.thumbnail.url + '" />' }).appendTo("#div1"); 
});

私が得たのは、div内の画像のリストです。欲しい結果を正確に得る方法がわかりません。

4

3 に答える 3

1

一度DOMに投稿したほうがいいでしょう。

var myNewStuff = "";
$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><img src='" + d.thumbnail_images.thumbnail.url + "' /></li>";
});
$(myNewStuff).appendTo("#div1");

編集：定義なしでhrefを入れてみてください。ここで推測します：

$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><a data-transition='slidedown' href='" + d.myhref + "<img src='" + d.thumbnail_images.thumbnail.url + "' /><h3> Menu" + index + "</a></li>";
});
$(myNewStuff).appendTo("#div1");

答え

var myNewStuff = "";
$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><a data-transition='slidedown' href='" + d.slug + "'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3> Menu" + index + "</li>";
        });
$(myNewStuff).appendTo("#div1");
于 2013-08-26T12:25:31.220 に答える
1

これはどう：

HTML

<ul id="list"></ul>

Javascript

$(document).ready(function(){
    var data = [
        {href: '/url1', img: 'img1.jpg', text: 'text1'},
        {href: '/url2', img: 'img2.jpg', text: 'text2'},
        {href: '/url3', img: 'img3.jpg', text: 'text3'},
        {href: '/url4', img: 'img4.jpg', text: 'text4'}
    ];

    for(var i = 0; i < data.length; i++){
        var li = $('<li>');
        var h3 = $('<h3>').text(data[i].text);
        var im = $('<img/>').attr('src', data[i].img);
        var a  = $('<a>').attr('href', data[i].href).append(im).append(h3);

        $('#list').append(li.append(a));
    }
})
于 2013-08-26T12:33:04.917 に答える
-2

これを試して..

$("ul").append("<li><a href='url-here'><img src="' + d.thumbnail_images.thumbnail.url + '" /></a></li>");
于 2013-08-26T12:22:55.550 に答える