2

このページを手動ではなく動的に作成するために使用する簡単なjqueryコードがあります。ここに私のコードがあります

ループ

for ( var i = 0; i < links.length; i++ ) {
    $("#programs").append(
        $("li")
        .html("div")
        .html("a", {
            href: links[i] + ".exe"
        })
        .html("img", {
            src: icons[i]
        })
        .html("p")
        .html(captions[i])
    );
}

配列の宣言

var links = ["pictureVeiwer","maze","firefoxPrank"];

var icons = ["firefox-icon.gif","maze.jpg","imageVeiwer.jpg"];

var captions = ["Cute Firfox prank","Cool maze","Program to veiw pictures... kinda useless in 2013"];

私の構文は少しずれていると思います。以前に同様のコードを使用しましたが、ループでは使用していません。私は何を間違っていますか?どうすればよいですか?

フィドル。

4

3 に答える 3

2

$("li")ページ上のすべてのli要素を選択します。実際には新しい要素を作成しません。次のようにする必要があります。

$("<li/>");

また：

$("<li></li>");

また、以前のコンテンツを上書きするメソッドをチェーン.html()しています。次のように、要素を個別に作成することをお勧めします。

for (var i = 0; i < links.length; i++) {
    var $li = $("<li/>"),
        $a = $("<a/>", { href: links[i] + ".exe", text: 'whatever' }),
        $img = $('<img/>', { src: icons[i] });
        $div = $('<div/>').append($a).append($img);

    $li.append($div).appendTo('#programs');  
      // |          |
      // |          ---- append the `li` element to #programs            
      // |           
      // ---- append to the `li` element
}

多くの要素を動的に生成している場合は、Handlebars、EJS、Mustacheなどのテンプレート ライブラリの使用を検討できます。

于 2013-09-29T22:41:24.363 に答える
1

Underscore が提供するように、テンプレートを使用することもできます。

HTML:

<script type="text/template" id="list-template">
    <li>
        <div>
            <a href="<%= href %>"><img src="<%= src %>"></a>
            <p><%= caption %></p>
        </div>
    </li>
</script>

<ul id="programs"></ul>

<script src="http://underscorejs.org/underscore-min.js"></script>

JS:

var $programsList = $('#programs');
var listTemplateHtml = $('#list-template').html();
for ( var i = 0; i < 3; i += 1 ) {
    var li = _.template(listTemplateHtml, {
        href: links[i] + ".exe",
        src: icons[i],
        captions: captions[i]
    });
    $programsList.append(li);
}

これははるかに簡単で保守しやすく、おそらくパフォーマンスも向上します。

于 2013-09-29T23:09:38.030 に答える