Question

我有类似下面的内容

<div id="contributors_div">
     <div id="arrow-up"></div>
</div>

我正在使用不同的锚点击的一些文本（数据）填充contributors_div。我的<div id="arrow-up"></div>包含必须显示的箭头图像。

下面是我如何填充div（或说覆盖）

var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").html(ul_data);

但这也是删除箭头。当我使用append时，我的旧数据也会被附加，这不是所希望的。任何人都可以告诉我正确的方法。感谢

Answer 1

更清洁的方法是，IMO，在箭头向上插入一个容器<ul></ul>并填充/清空它。

<div id="contributors_div">
     <ul></ul>
     <div id="arrow-up"></div>
</div>

然后

$('#contributors_div ul').html(ul_data);

Answer 2

你可以这样做：

$("#contributors_div *:not(#arrow-up)").remove();

然后append() ...

jsFiddle

（可能你应该使用向上箭头而不是ID，我想它不是整页上唯一的箭头）

Answer 3

鉴于li元素应该属于ol或ul元素，我会将您的结构更新为：

<div id="contributors_div">
     <ul></ul>
     <div id="arrow-up"></div>
</div>

然后你可以说：

$("#contributors_div ul").html(ul_data);

...只是更新列表的内容。（当然，如果需要，你可以给ul一个id或类，但没有它就可以工作。）

但是为了更真实地回答您的问题，您可以暂时删除.detach() method上的箭头，然后在进行其他更改后.append()或.prepend()将其删除：

var $arrowUp = $("#arrow-up").detach();
var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").html(ul_data)
                      .append($arrowUp);

Answer 4

我喜欢的方式就像下面一样（虽然它有点hacky！）

<div id="contributors_div">
 </div>

并且jquery部分将是

$("#contributors_div").html("<div id=\"arrow-up\"></div>"); $("#contributors_div").append(ul_data);

Answer 5

尝试此操作：

$("#contributors_div").children().not("#arrow-up").remove();
var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").append(ul_data);

首先，我从except（not()）#arrow-up div中删除所有内容，然后运行循环以生成ul，然后将其附加到div。

工作fiddle。

除了一个元素外，我如何覆盖div内的所有内容

5 个答案: