0

jQueryを使用して構造を動的に作成し、

divの問題を解決しようとしています..

でも、なぜだか分からない？私のdiv「コンテンツ」は直接閉じられています...

私の結果：

<li class="monde">
    <div class="content">
    </div>        // -----------> problem content div here 
    <div class="ctn_img">
        <img src="myimage.png" />
    </div>
        <div class="choix">
            <input type="checkbox" class="checkbox" />
        </div>
    <div class="infos">
        <span class="caption">
            <a href="#"><span class="stats">Etats</span></a>
            <input type="text" class="name" />
            <span class="test">test</span>
        </span>
    </div>
    // <-------------- better content close here...
    <span class="glob">Global</span>
</li>

私のデモはこちら

4

3 に答える 3

2 
var content    = $('<div>').addClass('content'),
    image      = $("<img>").attr('src', 'myimage.png'),
    ctn_img    = $('<div>').addClass('ctn_img').append(image),
    choix      = $('<div>').addClass('choix').html('<input type="checkbox" class="checkbox" />'),
    caption    = $('<span>').addClass('caption').html('<a href="#"><span class="stats">Etats</span></a><input type="text" class="name"></span><span class="test">test</span>'),
    infos      = $('<div>').addClass('infos').append(caption),
    glob       = $('<span>').addClass('glob').html('Global');

    content.append(ctn_img).append(choix).append(infos).append(glob);
    var result = $('<li>').addClass('monde').append(content);

$(document.body).html(result);
于 2013-04-21T21:44:58.137 に答える
1

次に、要素を class .ctn_img、.choixand.infosに追加し、 toに追加.contentしないで<li>ください。

// ...
ctn_img = $('<div>').addClass('ctn_img').append(image).appendTo(content),
choix   = $('<div>').addClass('choix').html('<input ... />').appendTo(content),
infos   = $('<div>').addClass('infos').append(caption).appendTo(content),
// ...
result = $('<li>').addClass('monde').append(content, glob);

デモ: http://jsfiddle.net/nGRwJ/1/

于 2013-04-21T21:44:12.063 に答える
0

現在のアプローチには、少なくとも 2 つの欠点があります。

  1. 構造を維持するのは本当に難しいです (あなたはこの問題に直面しました)。
  2. DOM 操作が多すぎるappendと、パフォーマンスが低下します。

次のような HTML を構築する場合はどうでしょうか。

var result = $([
    '<li class="monde">',
        '<div class="content">',
            '<div class="ctn_img">',
                '<img src="myimage.png">',
            '</div>',
            '<div class="choix">',
                '<input type="checkbox" class="checkbox">',
            '</div>',
            '<div class="infos">',
                '<span class="caption">',
                    '<a href="#"><span class="stats">Etats</span></a>',
                    '<input type="text" class="name">',
                    '<span class="test">test</span>',
                '</span>',
            '</div>',
        '</div>',
        '<span class="glob">Global</span>',
    '</li>'
].join(''));

$(document.body).html(result);

はるかに読みやすい。または、テンプレートの使用を検討してください。

http://jsfiddle.net/baAUt/1/

于 2013-04-21T21:57:05.773 に答える