(JQuery) aanbring n absolute geposisioneer element om 'n lys item

Question

Ek het die volgende lys item wat ek wil 'n Stellings wysig knoppie voeg by:

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

Ek gebruik jQuery om 'n span te voeg tot die lys item:

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

Die lys item is staties geposisioneer, en toe ek uitset die bladsy en met die hand sluit die span in die lys item, is dit behoorlik geposisioneer. Maar toe ek dit by te voeg met jQuery, dit toon in die regter boonste hoek van die bladsy, buite die lys item.

Ek is natuurlik mis iets hier, so as iemand idees, wat jou sal hoog op prys gestel.

Dankie,

Chris Hampton

Web-koördineerder

Colorado State University

EDIT:

Ek het gedink dit sou dit doen (en dit nog mag), maar ek is nog steeds probleme het. Ek het die "kombineer die innerlike html" roete, en toe ek html die lys item skryf aan die konsole, dit korrek lyk (dit ooreenstem met wat outputted van my bediener-kode vir die bladsy laai):

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

Hier is die CSS van die item

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

Die .draggableBucketItem klas het posisie: statiese; toegepas word.

Answer 1

Append () die nuwe span sal plaas na die lys item element. Jy wil die html van die lys item te kry en kombineer die twee, of voeg tot die span reeds in die lys item bestaande.

aanbring om die kind van die lys-item moet werk:

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

jsbin voorbeeld