제이쿼리 , 자바스크립트 질문입니다..
본문
아이디 추가를 클릭하면
id="fruit요소번호"를 나타내려합니다
기본상황
<input type="button" id="add" value="아이디추가" onclick="add_num()">
<div class="fruit">
<p class="num">사과</p>
<p class="num">오렌지</p>
<p class="num">아보카도</p>
</div>
클릭 후
<input type="button" id="add" value="아이디추가" onclick="add_num()">
<div class="fruit">
<p class="num" id="fruit1">사과</p>
<p class="num" id="fruit2">오렌지</p>
<p class="num" id="fruit3">아보카도</p>
</div>
function add_num(){
$('.num').attr('id', );
}
에서 어찌추가를 해야할까요 ㅠ 조언이나 관련링크 부탁드립니다..
답변 4
에고 제가 바보짓을 했네요...
<input type="button" id="add" value="아이디추가" onclick="add_num()">
<div class="fruit">
<p class="num">사과</p>
<p class="num">오렌지</p>
<p class="num">아보카도</p>
</div>
<script>
function add_num() {
n = 0;
for (i of document.getElementsByClassName("num")) {
n++;
i.id = "fruit" + n;
}
}
</script>
이건 코드를 좀 풀어쓴 것이고...
이까 코드도
{n + 1) 부분을 (n = n + 1) 로만 바꾸어도 됩니다.^^
감사합니다 ㅜ 바로 해결했네요!!
var id = $('.fruiit .num').length + 1;
$('.num').attr('id', "fruit" + id);
앗 저도 그걸하긴했는데 중간에 문제가 생겨서...
삭제버튼이 있는데
<p class="num" id="fruit2">오렌지</p> 이걸삭제하면
1,3으로 되버려서요...
그래서 요소의 순서를 넣는...ㅠㅠ
제가 설명이 부족했네요..ㅠ
<input type="button" id="add" value="아이디추가" onclick="add_num()">
<div class="fruit">
<p class="num">사과</p>
<p class="num">오렌지</p>
<p class="num">아보카도</p>
</div>
<script>
function add_num() {
n = 0;
for (i of document.getElementsByClassName("num")) i.id = "fruit" + (n + 1);
}
</script>
<div class="fruit">
<p class="num" id="fruit1">사과</p>
<p class="num" id="fruit1">오렌지</p>
<p class="num" id="fruit1">아보카도</p>
</div>
이렇게 나와버리네요 ㅠ
그래도 친절한 답변 감사합니다
function add_num() {
$('.num').each(function(idx) {
$(this).attr('id', 'fruit' + (idx + 1));
});
}
답변을 작성하시기 전에 로그인 해주세요.
