1

たくさんのリストアイテムを動的に作成しようとしています。探している構造は次のとおりです。

  <li><a href="Pending.aspx">
   <img src="images/gf.png" alt="" class="ui-li-icon">My Stuff
   <span class="ui-li-count">4</span> 
   </a>
   </li>

このコードでこの構造を作成しようとしていますが、「img」の部分を追加すると壊れているようです。imgの部分を削除すると、少なくとも機能しますが、探しているものがまったくありません。これを修正する方法について何かアイデアはありますか？

 $('ul').append(
        $('<li>').append(
        $('<a>').attr('href', 'some link').attr('data-container', 'listview').append(
        //THIS BREAKS IT
        $('<img>').attr('src','some image').attr('alt','').append(
        $('<span>').attr('class', 'tab').append('1')
        ))));

ここにあるリストアイテムを動的に作成しようとしています：http： //jquerymobile.com/demos/1.1.1/docs/lists/lists-icons.html

閉じられていない画像タグがあることに注意してください。それが、私が推測するスパンタグを追加するのに有効な方法です。javascriptでimgタグを閉じないようにするにはどうすればよいかわかりませんか？

4

3 に答える 3

2

はい、そうすべきです: animgは void 要素です。子、子ノード、またはあらゆる種類の子孫を持つことはできません。

（コードを読んで）あなたが望むと思われるものを達成するには、次のことをお勧めします。

var list = $('<ul />').appendTo('body'),
    listElem = $('<li />').appendTo(list),
    link = $('<a />', {
        'href': 'pending.aspx',
        'class' : 'ui-li-icon'
    }).attr('data-container', 'listview').text('My Stuff').appendTo(listElem);
$('<img />', {
    'src': 'images/gf.png',
    'alt': 'alttext'
}).prependTo(link);
$('<span />', {
    'class': 'ui-li-count'
}).text('4').appendTo(link);​

JS フィドルのデモ。

于 2012-08-22T19:00:50.820 に答える
2

もっと簡単にしてみてください。

それはあなたにとってはるかにうまくいくかもしれません:-)

$('ul').append(
   $('<li>', {
       html: $("<a>", {
           href: "some link", "data-container": "listview",
           html: $("<img>", {
               src: "some image", alt: "",
               html: $("<span>", {
                    class: "tab", html: "1"
               })
           })
       })
    })
);

何が悪いのかわかりましたか？anはas HTMLimgを持つことはできません! span実際には子ノードを持つことはできません!

したがって、画像の後にスパンを追加することができます。

$('ul').append(
   $('<li>', {
       html: $("<a>", {
           href: "some link", "data-container": "listview",
           html: $("<img>", {
               src: "some image", alt: ""
           }).after($("<span>", {
                    class: "tab", html: "1"
               }))
       })
    })
);

デモ: http://jsfiddle.net/maniator/X3XDF/

于 2012-08-22T19:02:39.173 に答える
0 
//assume arrayOfImageUrls and that these URLs have been sanitized on the front end

var frontText = '<li><a href="Pending.aspx"><img src="',
backText = '" alt="" class="ui-li-icon">My Stuff<span class="ui-li-count"></span></a></li>',
joinText = backText + frontText,

$_ulList = $('ul').append(frontText + arrayOfImageUrls.join(joinText) + backText);

$_ulList.find('li > .ui-li-count').each( function(i){ $(this).text(i); } );
于 2012-08-22T19:29:36.027 に答える