jquery의 각 위치에 두 개의 다른 항목을 복제하고 배치하는 방법

사용자 5349142

div와 해당 div를 닫는 버튼이 있습니다. 나는 그것들을 따로 복제하고 고유 한 증가 ID를 둘 다에 할당하고 있습니다. 복제가 일어나고 버튼이 Div를 닫는다는 점에서 모든 것이 작동합니다. 버튼 위치에 문제가 있습니다. 복제 된 div를 참조하여 버튼이 항상 같은 위치에 있기를 원합니다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까?

HTML

<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id"></div>
<a href="#" onclick="duplicateDiv()">Add</a>

자바 스크립트

function duplicateDiv(){ 
    $('#btn').clone().attr('id', 'btn'+ cloneCount2++).insertBefore($('[id^=id]:first'));

    $('#id').clone().attr('id', 'id'+ cloneCount++).insertAfter($('[id^=id]:first'));

    //clearing the input items in the new cloned div
    $("#id").find("input").val("");     
}


function hideDiv(obj){
    var currentId = $(obj).attr('id');
    var divId = currentId.replace("btn", "id");
    $("#"+divId).hide();
    $("#"+currentId).hide();
}
손님 271314

질문을 올바르게 해석하면 .appendTo(),.insertAfter($("#btn" + cloneCount))

var cloneCount = 0, cloneCount2 = 0;

function duplicateDiv() {

  //the close button
  $("#btn")
  .clone().attr("id", function(_, id) {
        return id + (++cloneCount2)
  })
  .appendTo("body")
  
  $("#id")
  .clone().attr("id", function(_, id) {
        return id + (++cloneCount)
  })
  .insertAfter($("#btn" + cloneCount))

  //clearing the input items in the new cloned div
  $("#id").find("input").val("");
}

function hideDiv(obj) {

  var currentId = $(obj).attr('id');
  var divId = currentId.replace("btn", "id");
  $("#" + divId).hide();
  $("#" + currentId).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id">div</div>
<a href="#" onclick="duplicateDiv()">Add</a>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

한 번에 두 개의 배열을 반복하고 배열의 색상을 다른 배열의 각 값에 할당하는 방법

분류에서Dev

한 줄에 두 개의 블록 항목을 배치하는 방법

분류에서Dev

2 개의 배열을 비교하고 일치하는 각 항목의 개수를 얻는 방법

분류에서Dev

목록 상자의 각 항목 뒤에 수평선을 배치하는 방법

분류에서Dev

두 개의 다른 객체 배열을 병합하고 일치하는 항목과 일치하지 않는 항목을 모두 반환하는 방법은 무엇입니까?

분류에서Dev

다른 목록에 존재하는 두 목록에서 2 개의 항목을 찾는 Pythonic 방법

분류에서Dev

다른 목록에 존재하는 두 목록에서 2 개의 항목을 찾는 Pythonic 방법

분류에서Dev

N 개 항목의 모든 조합을 두 개의 가방으로 생성하여 각 항목이 하나 또는 0 개의 가방에 있습니다.

분류에서Dev

Testcafe-두 개의 다른 위치를 주장하는 방법.

분류에서Dev

Unsemantic을 사용하여 두 개의 서로 다른 글꼴 크기를 한 줄에 배치하는 방법

분류에서Dev

각도의 개체에서 항목을 제거하는 방법

분류에서Dev

두 개의 다른 배열을 하나의 배열에 넣는 방법

분류에서Dev

Mongo Aggregation Query $ group을 조정하여 $ group에 두 개의 항목이있는 대신 개체에 일치하는 키를 배치하는 방법

분류에서Dev

무작위로 선택된 여러 위치로 항목을 제한하여 각각의 평균 위치가 특정 범위 내에 있도록하는 방법

분류에서Dev

JS-JSON 객체의 항목을 다른 위치로 이동하는 방법

분류에서Dev

두 개의 다른 파일에서 일치하는 두 줄을 인쇄하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 열에 일치하는 숫자가있는 열의 모든 셀을 추가하는 방법

분류에서Dev

중복을 제외하고 하나의 HTML 테이블에 두 개의 PHP 배열을 표시하는 방법

분류에서Dev

하나의 플롯에서 두 개의 범례 레이블을 다른 위치에 배치

분류에서Dev

목록의 두 항목을 표시하고 다른 항목을 축소하는 방법은 무엇입니까?

분류에서Dev

올바른 배치로 하나의 루프 항목에 각 두 배열 항목 표시

분류에서Dev

두 개의 다른 배열에서 일치하지 않는 항목에 값 0 할당

분류에서Dev

PHP : 가장 최근의 mySQL 테이블 항목 두 개를 검색하고 각각 다른 변수에 저장

분류에서Dev

JSON 하위 객체의 배열을 가져오고 배열에서 일치하는 항목을 찾는 각도 방식.

분류에서Dev

JSON 하위 객체의 배열을 가져오고 배열에서 일치하는 항목을 찾는 각도 방식.

분류에서Dev

Javascript / Jquery 배열의 각 항목을 포맷하는 방법

분류에서Dev

다른 속성 이름을 가진 두 개의 다른 배열을 비교하고 자바 스크립트에서 일치하지 않는 배열을 제거하는 방법은 무엇입니까?

분류에서Dev

2 개의 다른 목록보기에서 항목을 비교하는 방법

분류에서Dev

두 개의 div를 다른 옆에 배치하는 CSS

Related 관련 기사

  1. 1

    한 번에 두 개의 배열을 반복하고 배열의 색상을 다른 배열의 각 값에 할당하는 방법

  2. 2

    한 줄에 두 개의 블록 항목을 배치하는 방법

  3. 3

    2 개의 배열을 비교하고 일치하는 각 항목의 개수를 얻는 방법

  4. 4

    목록 상자의 각 항목 뒤에 수평선을 배치하는 방법

  5. 5

    두 개의 다른 객체 배열을 병합하고 일치하는 항목과 일치하지 않는 항목을 모두 반환하는 방법은 무엇입니까?

  6. 6

    다른 목록에 존재하는 두 목록에서 2 개의 항목을 찾는 Pythonic 방법

  7. 7

    다른 목록에 존재하는 두 목록에서 2 개의 항목을 찾는 Pythonic 방법

  8. 8

    N 개 항목의 모든 조합을 두 개의 가방으로 생성하여 각 항목이 하나 또는 0 개의 가방에 있습니다.

  9. 9

    Testcafe-두 개의 다른 위치를 주장하는 방법.

  10. 10

    Unsemantic을 사용하여 두 개의 서로 다른 글꼴 크기를 한 줄에 배치하는 방법

  11. 11

    각도의 개체에서 항목을 제거하는 방법

  12. 12

    두 개의 다른 배열을 하나의 배열에 넣는 방법

  13. 13

    Mongo Aggregation Query $ group을 조정하여 $ group에 두 개의 항목이있는 대신 개체에 일치하는 키를 배치하는 방법

  14. 14

    무작위로 선택된 여러 위치로 항목을 제한하여 각각의 평균 위치가 특정 범위 내에 있도록하는 방법

  15. 15

    JS-JSON 객체의 항목을 다른 위치로 이동하는 방법

  16. 16

    두 개의 다른 파일에서 일치하는 두 줄을 인쇄하는 방법은 무엇입니까?

  17. 17

    두 개의 다른 열에 일치하는 숫자가있는 열의 모든 셀을 추가하는 방법

  18. 18

    중복을 제외하고 하나의 HTML 테이블에 두 개의 PHP 배열을 표시하는 방법

  19. 19

    하나의 플롯에서 두 개의 범례 레이블을 다른 위치에 배치

  20. 20

    목록의 두 항목을 표시하고 다른 항목을 축소하는 방법은 무엇입니까?

  21. 21

    올바른 배치로 하나의 루프 항목에 각 두 배열 항목 표시

  22. 22

    두 개의 다른 배열에서 일치하지 않는 항목에 값 0 할당

  23. 23

    PHP : 가장 최근의 mySQL 테이블 항목 두 개를 검색하고 각각 다른 변수에 저장

  24. 24

    JSON 하위 객체의 배열을 가져오고 배열에서 일치하는 항목을 찾는 각도 방식.

  25. 25

    JSON 하위 객체의 배열을 가져오고 배열에서 일치하는 항목을 찾는 각도 방식.

  26. 26

    Javascript / Jquery 배열의 각 항목을 포맷하는 방법

  27. 27

    다른 속성 이름을 가진 두 개의 다른 배열을 비교하고 자바 스크립트에서 일치하지 않는 배열을 제거하는 방법은 무엇입니까?

  28. 28

    2 개의 다른 목록보기에서 항목을 비교하는 방법

  29. 29

    두 개의 div를 다른 옆에 배치하는 CSS

뜨겁다태그

보관