각 함수를 사용하여 AJAX html 응답 수정

누군가이 코드가 왜 데이터 응답을 나타내지 않는지 내게 말할 수 있습니까? 이것은 각각 의 간단한 예이며 각각 기능입니다.각 함수를 사용하여 AJAX html 응답 수정

<html> 
<div class="new"> 
    <div class="span4"> 
     <h2>Heading1</h2> 
     <p>Text1</p> 
     <p><a href="#">Link1</a></p> 
    </div> 
    <div class="span4"> 
     <h2>Heading2</h2> 
     <p>Text2</p> 
     <p><a href="#">Link2</a></p> 
    </div> 
</div> 
</html>

여기에 주요 파일 몸 :

<!DOCTYPE html> 
<body> 
<textarea id="gethtml" rows="40" cols="125"></textarea> 

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script> 
    "use strict"; 
    $(function() { 

     $.get('file.html', function(data) { 
      ajaxfunction(data); 
     }); 

     function ajaxfunction(data) { 
      $(data).find(".span4").each(function() { 
       $(this).find("p").eq(0).text("Hello"); 
       $(this).find("p").eq(0).after("<p>newline</p>"); 
       console.log($(this)); 
      }); 
      $("#gethtml").val(data); 
     } 

    }); 
</script> 
</body> 
</html>

당신은 콘솔이 각 span4에 대한 정확한 데이터를 표시하는 것을 볼 수 있지만 왜 수 있습니다 여기에

는 아약스가 HTML 파일을 요청 변경 사항을 반영하기 위해 "데이터"문자열이 업데이트되지 않습니까? 텍스트 영역에서

편집

function ajaxfunction(data) { 
      var tree = $("<div>" + data + "</div>"); 
      $(tree).find(".span4").each(function() { 
       $(this).find("p").eq(0).text("Hello"); 
       $(this).find("p").eq(0).after("<p>newline</p>"); 
       console.log($(this)); 
      }); 
      $("#gethtml").val(tree.html()); 
}

이 곳, 즉 <p>Hello</p><p>newline</p>. 그래서 새 줄을 추가하려면 문자열로 수정해야합니다. 맞습니까?

감사합니다.

출처

2012-04-01 user1306663

'tree'는 이미 jQuery 객체입니다. '$()'를 호출하지 마십시오. – SLaks

data은 문자열입니다.

each 코드는이 문자열을 DOM 트리로 파싱하고 수정합니다.
그러나이 DOM 트리에서는 아무 것도하지 않습니다.

val() 호출은 원래 문자열을 다시 사용합니다.

대신에 html()을 호출하여 수정 된 DOM 트리의 소스를 가져와야합니다.

자세한 내용은 my blog post을 참조하십시오.

출처

2012-04-01 18:38:12 SLaks

감사합니다! 이 게시물에 대한 질문을 업데이트했습니다. – user1306663

업데이트 된 게시물 :) – user1306663

각 함수를 사용하여 AJAX html 응답 수정

답변

관련 문제