(jQuery) Aggiunta di un elemento privilegiato assoluto a un elemento della lista: jquery, posizione-css, listino

Ho la seguente voce di elenco a cui voglio aggiungere un pulsante "Modifica impostazioni":

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

Uso jQuery per aggiungere un intervallo alla voce di elenco:

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

L'elemento dell'elenco è posizionato staticamente e quandoHo prodotto la pagina e includo manualmente l'intervallo nella voce di elenco, è posizionato correttamente. Ma quando lo aggiungo con jQuery, viene visualizzato nell'angolo in alto a destra della pagina, fuori dall'elenco.

Ovviamente mi manca qualcosa qui, quindi se qualcuno ha delle idee, sarebbe molto apprezzato.

Grazie,

Chris Hampton

Coordinatore Web

Colorado State University

MODIFICARE:

Ho pensato che questo l'avrebbe fatto (e potrebbe ancora),ma sto ancora riscontrando problemi. Ho seguito il percorso "combina html interno" e quando scrivo l'html dell'elemento dell'elenco sulla console, sembra corretto (corrisponde a ciò che viene emesso dal mio codice server quando la pagina viene caricata ):

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

Ecco il CSS dell'articolo

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

La classe .draggableBucketItem ha posizione: statica; applicato ad esso.

risposte:

0 per risposta № 1

Aggiungere() posizionerà il nuovo intervallo dopo l'elemento dell'elemento elenco. Si desidera ottenere l'html della voce di elenco e combinare i due, oppure aggiungere l'intervallo già esistente all'interno della voce di elenco.

L'aggiunta al figlio dell'elemento dell'elenco dovrebbe funzionare:

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

esempio jsbin

---