0

私の翡翠！ https://lh4.googleusercontent.com/-hzRqciA1Tjs/UGmc39ijHuI/AAAAAAAAAFk/0XJzY0ZqU70/s720/App.jpg

div(data-role='content')
   div(class='content-primary')
      ul(data-role="listview", data-split-theme='a',data-split-icon='gear')
         li(data-theme='a')
          a(href="")
            div(id='addClientDivId')
          a(href='#', data-icon='delete', title=' Delete ')

jqueryを使用して上記の翡翠の内容を動的に生成したいと思います。誰かが私を助けることができますか..???

評判がないので、画像のスクリーンショットをpicasaにアップロードしました。スクリーンショットを参照してください。以下に示すすべての可能性を試しましたが、スクリーンショットのような効果を得ることができませんでした。

答え：

クエリの解決策を見つけました。

var newContent = '<div data-role="content" data-theme="a" class="content-primary">';
        newContent += '<ul data-role="listview" data-split-theme="a" data-inset="true" id="ulId">';
        newContent += '<li>';
        newContent += '<a href="">';
        newContent += '<h4></h4>';
        newContent += '<h5></h5>';
        newContent += '<a href="" , data-icon="delete">';
        newContent += '</a>';
        newContent += '</a>';
        newContent += '</li>';
        newContent += '</ul>';
        newContent += '</div>';
        $("#addClientDivId").append(newContent).trigger('create');
4

3 に答える 3

1

各タグを個別の jQuery オブジェクトとして作成することもできます。

var contentDiv = $('<div></div>').attr('data-role','content');
var contentPrimary = $('<div></div>').attr('class', 'content-primary');
var ul = $('<ul></ul>');
$(ul).attr('data-role', 'listview').attr('data-split-theme', 'a').attr('data-split-icon','gear');

次に、li(s) を ul に追加します。

for(..) {
   var li = $('<li></li>');
   var liContent = $('<a></a>').attr('href', 'a');
   // You can build the rest of your li content here.

   // Append the li content to the li
   $(li).append(liContent);

   // And then append the li to the ul
   $(ul).append(li);
}

ul が完成したら、残りを構成できます。

$(contentPrimary).append(ul);
$(contentDiv).append(contentPrimary);

次に、すべてを DOM に追加します。

$('body').append(contentDiv);

パフォーマンスを向上させるには、構造全体を文字列 (「+」で連結) として構築し、それを DOM に追加します。

var contentDivAsString = '<div data-role="content">....</div>';
$('body').append($(contentDivAsString));

どちらのアプローチでも機能しますが、2 番目のアプローチの方がパフォーマンスが高く、それを達成するために使用するオブジェクトが少なくなります。

于 2012-10-01T12:02:13.887 に答える
0

あなたはこれを試すことができます

var aMain=$('<a/>', {
    'text':'Delete',
    'href':'',
    'data-icon':'delete',
    'title':' Delete '
});
var acDivid=$('<div id="addClientDivId"></div>');
var a=$('<a href=""></a>');
var li=$('<li data-theme="a"></li>');
var ul=$('<ul />', {
   'data-role':'listview',
   'data-split-theme':'a',
   'data-split-icon':'gear'
});
var cP=$('<div class="content-primary"></div>');
var content=$('<div data-role="content"></div>');
$('body').append(content.append(cP.append(ul.append(li.append(a.append(acDivid.append(aMain)))))));

デモ。

于 2012-10-01T12:41:04.307 に答える
0

次のような文字列で html を保存するcontent = "<div data-role='content'">[...]</div>だけです。$("body").append(content)

それ以外の場合は、セレクターに関するドキュメントを確認してください: http://api.jquery.com/category/selectors/

于 2012-10-01T11:43:57.890 に答える