jquery - (jQuery) 将绝对定位元素附加到列表项

Question

我有以下列表项，我想将“编辑设置”按钮附加到：

<li class="draggableBucketItem ui-state-default" id="bucketItem75" bucketID="2" pageModuleID="75"><span class="spnName">HTML Content</span><li>

我使用 jQuery 将跨度附加到列表项：

$('#bucketItem75').append('<span class="spnEditModule">Edit Settings</span>');

列表项是静态定位的，当我输出页面并在列表项中手动包含跨度时，它是正确定位的。但是当我用 jQuery 添加它时，它会显示在页面的右上角，在列表项之外。

我显然在这里遗漏了一些东西，所以如果有人有想法，那将不胜感激。

谢谢，

克里斯汉普顿

网络协调员

科罗拉多州立大学

编辑：

我认为这会做到（而且仍然可能），但我仍然遇到问题。我采用了“组合内部 html”路线，当我将列表项的 html 写入控制台时，它看起来是正确的（它与页面加载时从我的服务器代码输出的内容匹配）：

<span class="spnName">HTML Content</span><span class="spnEditModule">Edit Settings</span>

这是项目的 CSS

.draggableBucketItem span.spnEditModule{position: absolute; top: 3px; right: 3px; font-weight: bold; color: #fff;}

.draggableBucketItem 类有 position: static; 应用于它。

score 0 · Accepted Answer

Append()将在列表项元素之后放置新的跨度。您想要获取列表项的 html 并将两者结合起来，或者附加到列表项中已经存在的跨度。

附加到列表项的子项应该可以工作：

$('#bucketItem75').children().append('<span class="spnEditModule">Edit Settings</span>');

1 回答 1