div 요소를 jquery로 바꾸고 dom을 업데이트 할 수 있습니까?

Question

안녕하세요, 빠른 질문입니다. 두 개의 새 div로 div의 내용을 업데이트하여 이전 항목을 대체하려고합니다. 각각의 새 div에는 이전 ID를 대신 할 고유 한 ID가 있습니다. 그런 다음 새 div의 ID를 원본 대신 값으로 사용하기위한 추가 업데이트가 필요합니다. Jquery에서 가능합니까? 도움을 주셔서 미리 감사드립니다.

var display_total = $(".display_total").attr("id"); 
var display_of_total = $(".display_of_total").attr("id"); 

var new_display_of_total = parseInt(display_of_total) + 1; 
var new_display_total = parseInt(display_total) + 1; 

$('.totalmessages').html(' 
    <div class="display_of_total" id="' + new_display_of_total + '"> 
     Displaying ' + new_display_of_total + ' of 
    </div> 
    <div class="display_total" id="' + new_display_total + '">' 
     + new_display_total + ' messages... 
    </div> 
'); 

(편집자 주 : 원래 코드에서 어떤 바꿈)

Answer 1

당신이 게시 한 것에서 꽤 많은 것처럼 보입니다. 너를 위해 일하지 않는게 뭐야?

나는 두 개의 친절한 조언을 가지고있다.

먼저 w3schools에 따르면 요소의 ID는 숫자 일 수 없습니다. (파이어 폭스 숫자 식별자와 함께 좋은 플레이 것으로 보인다.)

이름 지정 규칙 :

• 문자로 시작해야합니다
• 이 올 수 있습니다
AZ 또는 AZ : 문자 (A-ZA-Z) , 숫자 (0-9), 하이픈
("-"), 밑줄 ("_"), 콜론
(":")와 마침표 "."
• 값은 대소 문자를 구분

숫자 일 필요가있는 경우 <div data-num="25"></div> 대신 데이터 속성을 사용할 수 있습니다. 그런 다음 id를 얻는 것과 같은 방법으로 액세스 할 수 있습니다. "id"의 "data-num"을 바꿔 넣기 만하면됩니다. $('.display_total').attr('data-num').

두 번째로 특정 동작에 대해 호출 할 수있는 함수에이 코드를 배치하면 요구 사항은 I then want any further update to use the ids of the new divs as their values instead of the original.입니다.

당신 같은 모양해도 될까요 기능 :

function updateMessages(){ 
    var display_total=$(".display_total").attr("data-num"); 
    var display_of_total=$(".display_of_total").attr("data-num"); 

    var new_display_of_total=parseInt(display_of_total)+1; 
    var new_display_total=parseInt(display_total)+1; 

    $('.totalmessages').html('<div class="display_of_total" data-num="'+new_display_of_total+'">Displaying '+new_display_of_total+' of </div><div class="display_total" data-num="'+new_display_total+'">'+new_display_total+' messages...</div>'); 
} 

그리고 당신과 같이 클릭 이벤트에, 예를 들어,를 업데이트 할 수있을 것 : 지금

$('#click_me').click(function(){ 
    updateMessages(); 
}); 

Answer 2

왜 DOM 조작 방법을 사용하지? 이와 같이 :

var new_display_total= 1 + parseInt($(".display_total").attr("id")); 
var new_display_of_total= 1 + parseInt($(".display_of_total").attr("id")); 

$('.totalmessages').empty(); 

var new_total_element = $('.totalmessages').append('<div class="display_of_total" id="'+new_display_of_total+'">Displaying '+new_display_of_total+' of </div>"'); 

var new_display_of_total_element = $('.totalmessages').append('<div class="display_total" id="'+new_display_total+'">'+new_display_total+' messages...</div>''