(jQuery)絶対的なポジショニングされた要素をリストアイテムに追加する
-
06-07-2019 - |
質問
「設定の編集」ボタンを追加したい次のリスト項目があります:
<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クラスの位置は次のとおりです。それに適用されます。
所属していません StackOverflow