创建标记动态Jquery的

我试图动态创建一堆列表中的项目，我要找结构创建标记动态Jquery的

<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中的img标签？

来源

2012-08-22 Nick LaMarca

它是如何坏了？你看到一个错误？ – jrummell

使用img后，您可能不想追加。 – j08691

是的，这应该：一个img是一个空元素，它不能有孩子，子节点或任何形式的后代。

要实现你仿佛想（从阅读你的代码），我建议：

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。

来源

2012-08-22 19:00:50

你的代码解决方案并不那么优雅：-P – Neal

事实上，如果我试图保持嵌套水平，你有自己的答案，我会在三天后失去。我更喜欢创建单个节点，然后将/ prepend追加到创建和标识的元素，而不是一次创建整个HTML块。这是个人的事情，但我觉得我的方法更容易是所有=） –

我通常遵循你的方法。我只是有一些乐趣^ _ ^。这就是为什么你的答案比我的快2分钟:-P – Neal

试着让它变得更简单。

它可能会制定出适合你:-)

$('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-22 19:02:39 Neal

为什么downvote？ – Neal

//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-22 19:29:36

创建标记动态Jquery的

回答

相关问题