jQuery append（）：标记关闭之前，它应该

Question

我有这个jQuery代码，我检索数据，我想显示在bootswatch（bootstrap）超级英雄列表组的结果。

我有代码：

$('#eventos_stats').html('<h2>Events</h2>'); 
$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li>'); 
$('#eventos_stats').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

的问题是，对于关闭的第一个结果，上榜的群体去看待分离或分割的，而不是渲染的结果放在一起。

也就是说，显示的HTML是：

<ul class="list-group"><li class="list-group-item"><span class="badge">3</span>Número de eventos</li></ul> 
<li class="list-group-item"><span class="badge">245</span>Número de asistentes</li> 

可以注意到</ul>关闭之前，即使我将其追加在最后。这是问题。它应该是这样的：

<ul class="list-group"><li class="list-group-item"><span class="badge">3</span>Número de eventos</li> 
<li class="list-group-item"><span class="badge">245</span>Número de asistentes</li></ul> 

这究竟是为什么？我怎样才能使结束标签显示在最后？

Answer 1

你可以简单地改变第二附加追加到类的无序列表

$('#eventos_stats').html('<h2>Events</h2>'); 
$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li>'); 
$('.list-group').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

Answer 2

您误解了append的工作方式 - 您必须在每次调用中追加整个元素。您不能在一次调用中追加元素的开始标记，然后在另一个中关闭它。

试试这个：

$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li><li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

Answer 3

你的第三条线可以

$('#eventos_stats ul').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li>');