jquery - jQuery prepend 不适用于 firefox

Question

我有一个这样的结构：

<div id="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

在某些时候，我想在容器中添加更多“孩子”。

$("#container").prepend('<div class="child"></div>');

这适用于除 Firefox 之外的所有浏览器。Firefox追加新的孩子。结果，由于在页面加载时使用了相同的代码，孩子们实际上是颠倒的。

我尝试过使用 .innerHTML、.before()、使用 .html(child + old_html) 等的所有内容，但我一辈子都无法让 Firefox 正确地添加 html。

如果有人可以帮我解决这个问题，请提前感谢。

编辑：添加了缺少的“

score 1 · Accepted Answer

您的选择器字符串未关闭：

改变这个：

$("#container).prepend('<div class="child"></div>');

到：

$("#container").prepend('<div class="child"></div>');

score 1 · Accepted Answer

经过一番研究，似乎 prepend() 没有错，但 Firefox 实际上反转了我在 json 中的键。为了说明发生了什么，我的 json 看起来像这样：

{"shouts":[
"12"{<some data concerning id=12 here>}, 
"11"{<some data concerning id=11 here>}, 
"10"{<some data concerning id=10 here>},
etc ]}

Chrome 和所有其他浏览器在循环中颠倒了这个顺序，因为它们可能假定“12”、“11”和“10”作为数组中的键。循环时，这将产生 10、11 和 12。然而，Firefox 没有这样做，这导致了反转。

解决方案是从 json 中删除 ID（这使得行为统一，即所有浏览器现在都以相反的顺序显示它），然后再次为 json 反转顺序，这将产生：

{"shouts":[
{<some data concerning id=10 here>}, 
{<some data concerning id=11 here>}, 
{<some data concerning id=12 here>},
etc ]}

这解决了问题！（现在可以从example.php中看到。）感谢大家的帮助。

2 回答 2