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') ) 를 이 위치에 넣어보면 값이 나오지않는 다는 것을 알 수 있을겁니다
정말 감사합니다. 잘되네요! 연휴에 답변 달아주셔서 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
