ajax를 이용해 반복적인 작업을 하고싶습니다.

ajax를 이용해 반복적인 작업을 하고싶습니다.

QA

ajax를 이용해 반복적인 작업을 하고싶습니다.

본문


<ul id="list">
<li data-id="1"><span id="number"></span>번게시물 : <div id="data-area"></div></li>
<li id="list" data-id="2"><span id="number"></span>번게시물 : <div id="data-area"></div></li>
<li id="list" data-id="3"><span id="number"></span>번게시물 : <div id="data-area"></div></li>
</ul>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$("#list li").each(function() {
var articleNum = $(this).attr('data-id');
    $.ajax({
        url : 'myurl' + articleNum,
        dataType: 'json',
        success: function(data) {
            var value1 = data.data.value;
            var num = data.data.no;
            $(this).children("#number").append(num);
            $(this).children("#data-area").append(vlue1);
            }
    });
});
</script>

 

 

위 소스처럼 li의 data-id값으로 ajax를 이용해 반복적으로 해당 값을 가져와서 출력하고싶은데요,

하나의 소스로는 가능한데 반복적으로 출력하는 걸 모르겠네요..

어떻게하면 각 li의 data-id값으로 각각 ajax를 실행시켜 해당 li내에 있는 div나 span영역에 값을 가져올 수 있을까요?

이 질문에 댓글 쓰기 :

답변 1

id="number" --> class="number" 

id="data-area" --> class="data-area"  :::: class로 변경, 이름이 같은 id가 1개 이상 있어서는 안됨

li에도 id를 같은 이름으로 붙여놓았네요

 

$("#list li").each(function(index) { <----- index추가

아래처럼 변경

     $(".number").eq(index).append(num); 
     $(".data-area").eq(index).append(value1); ::: 이곳에 $(this)를 놓으면 #list li가 아님

 

    alert( $(this).attr('data-id') ) 를 이 위치에 넣어보면 값이 나오지않는 다는 것을 알 수 있을겁니다

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 150
QA 내용 검색
filter #json ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT