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"
               })
           })
       })
    })
);

现在你明白有什么问题了吗？一个img不能有一个span作为HTML！它实际上不能有任何子节点！

所以你可以做的是在图像之后添加跨度：

$('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 回答