Question

我正在尝试动态创建一堆列表项，我正在寻找的结构是

  <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

请注意，他们的图像标记未关闭。这就是我认为添加span标签的有效方法。不确定如何在javascript中完成NOT关闭img标记？

Answer 1

是的，应该：img是一个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 Fiddle demo

Answer 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/

Answer 3

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

动态创建标记Jquery

3 个答案: