제이쿼리 , 자바스크립트 질문입니다..

제이쿼리 , 자바스크립트 질문입니다..

QA

제이쿼리 , 자바스크립트 질문입니다..

본문

아이디 추가를 클릭하면

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>

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>

이렇게 나와버리네요 ㅠ

그래도 친절한 답변 감사합니다

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

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