SIR
목록으로

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

바바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,546
답변 4
목록

아이디 추가를 클릭하면

id="fruit요소번호"를 나타내려합니다

 

기본상황

Copy 
<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>

 

클릭 후

Copy 
<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',     );
        
        
     }

 

에서 어찌추가를 해야할까요 ㅠ 조언이나 관련링크 부탁드립니다..

 

#jquery #javascript

답변 4개

채택된 답변
+20 포인트

에고 제가 바보짓을 했네요...

 

Copy 
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

이건 코드를 좀 풀어쓴 것이고...
이까 코드도
{n + 1) 부분을 (n = n + 1) 로만 바꾸어도 됩니다.^^
감사합니다 ㅜ 바로 해결했네요!!

댓글을 작성하려면 로그인이 필요합니다.

Copy 
function add_num() {

  $('.num').each(function(idx) {    

    $(this).attr('id', 'fruit' + (idx + 1));

  });

}
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

<div class="fruit">
<p class="num" id="fruit1">사과</p>
<p class="num" id="fruit1">오렌지</p>
<p class="num" id="fruit1">아보카도</p>
</div>

이렇게 나와버리네요 ㅠ

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

댓글을 작성하려면 로그인이 필요합니다.

var id = $('.fruiit .num').length + 1;
$('.num').attr('id',  "fruit" + id);

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

앗 저도 그걸하긴했는데 중간에 문제가 생겨서...
삭제버튼이 있는데

<p class="num" id="fruit2">오렌지</p> 이걸삭제하면

1,3으로 되버려서요...

그래서 요소의 순서를 넣는...ㅠㅠ

제가 설명이 부족했네요..ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고