준비 완료시 Jquery의 여러 객체에서 .post 수행하기

Question

지금 당장, 일부 목록을 페이지에 표시하고 Jquery를 사용하여 서버에서 해당 정보를 꺼내려고합니다.

<div class="list" name="category1" /> 
<div class="list" name="category2" /> 
<div class="list" name="category3" /> 

.... 

$(".list").ready(function(){ 
    $.post("/getData", "{name=category#}" 
    function(data) { 
     // Do something here to display the list 
    } 
); 
}); 

는 가정하면/GetData의 필요한 UL .../UL HTML 데이터를 반환, 내가 다시 전송 된 데이터로 된 div의 텍스트를 교체 가야합니까 방법 : 코드는 같다? 나는 운이없는 $ this.html (데이터)의 다른 변형을 시도했다. 또한 .post 매개 변수로 다시 보낼 div의 이름을 선택하는 방법이 있습니까? $(div.list).html(dataFromResponse); : 각 사업부에서 동일한 텍스트를 싶을 경우

Answer 1

처음에는 코드에 몇 가지 오류가 있습니다. 준비 이벤트는 목록 클래스가 아닌 문서 개체에서 사용해야합니다. 또한 $ .post 호출에서 쉼표가 누락되었습니다. 여기에 동적 인 aspect가 추가 된 수정 된 코드가 있습니다. 테스트하지는 않았지만 약간의 변경이 필요하지 않을 경우 작동하지 않아야합니다.

$(document).ready(function() { 

    $('.list').each(function() { 
    var list = $(this); 
    $.post('/getdata', {category: list.attr('name')}, function(result) { 
     list.html(result); 
    }); 
    }); 

}); 

Answer 2

는

$(div[name=category1]).html(dataFromResponse);을 시도하거나. 이 모든 것은 컨텍스트에 따라 다르며 다른 일치 선택기가없는 경우 div을 건너 뛸 수 있습니다.

의견을 기반으로 편집 : 당신은 다음과 같은 것을 의미합니까?

// fetch new content 
function getContentByCategory(name) { 
    $.post(
     '/getData', 
     {category: name}, 
     function(response) { handleResponse(name, response); } 
    ); 
} 

// change the looks 
function handleResponse(name, response) { 
    $('div[name='+name+']').html(response); 
} 

// trigger it all 
$('.list').each(function(){ 
    getContentByCategoryName($(this).attr('name')); 
});