(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>

항목의 CS는 다음과 같습니다

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

.DraggableBucketItem 클래스는 위치를 가지고 있습니다 : 정적; 그것에 적용되었습니다.

Answer 1

부록 () 목록 항목 요소 다음에 새 스팬을 배치합니다. 목록 항목의 HTML을 가져 와서 둘을 결합하거나 이미 목록 항목 안에 존재하는 스팬에 추가하십시오.

목록 항목의 자녀에게 추가되는 것은 다음과 같습니다.

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

JSBIN 예