jQuery를 사용하여 ID 이름으로 클래스 찾기

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
    </div> 
</div>

위 예제에서 음료수 버튼은 하나이지만 코드에는 8 개의 버튼이 있습니다. 각 클래스에는 동일한 이름의 클래스 div가 있습니다. 내가 뭘하려는거야 "다이나믹"복제 아이디 클래스 ("sugarcube"...) clone sugarcube 이미지를 추가하는 앵커 태그 (id = "drink1")의 ID를 잡아 동등한 클래스 이름을 div (클래스 = "drink1"). 혼란스럽지 않게 들리기를 바랍니다. 아마도 아래의 실패한 시도는 내가 성취하고자하는 것에 대한 아이디어를 줄 것입니다.jQuery를 사용하여 ID 이름으로 클래스 찾기

시도 1

$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));

시도 2 내가 구글과에 StackOverflow를 검색 한 및 코드 샘플을 발견하지 않았습니다

var className = $(this).attr("id"); 
console.log(className); 

console.log($(this).parent().children("div").hasClass(className));

(콘솔을 통해 작업 솔루션을 찾기 위해 노력하고). 도와 줘서 고마워.

여기에 전체 HTML 코드 컨텍스트의 ... 사업부는 클래스 (클래스 = "drink1")를 사용하는 반면

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
    <script src="js/jquery-animate-css-rotate-scale.js"></script> 
    <script> 
     $(function() { 
      $(".sugarcube").hide(); 
      var max = 8; 
      function animateSugarcubes() { 
       for (var i=1; i<=max; i++) { 
        $(".sugarcube" + i).css("position", "absolute"); 
        $(".sugarcube" + i).css("top", Math.ceil(Math.random() * (50 - 20) + 20)); 
        $(".sugarcube" + i).css("left", Math.ceil(Math.random() * (85 - 40) + 40)); 
        $(".sugarcube" + i).hide(); 
       } 
      } 

      $("#drinks a").click(function() { 

       for (var i=1; i<=max; i++) { 
        // Attempt 1 
        $(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent().children($(this).attr("id"))); 

        // Attempt 2 test code. 
        var className = $(this).attr("id"); 
        console.log($(this).parent().children("div").hasClass(className)); 
       } 

       return false; 
      }); 
      animateSugarcubes(); 
     }); 
    </script> 
</head> 
<body> 

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
     <a id="drink2" href=""><img src="images/drinkicon2.png" width="84" height="81"></a><div class="drink2"></div> 
     <a id="drink3" href=""><img src="images/drinkicon3.png" width="84" height="81"></a><div class="drink3"></div> 
     <a id="drink4" href=""><img src="images/drinkicon4.png" width="80" height="81"></a><div class="drink4"></div> 
     <a id="drink5" href=""><img src="images/drinkicon5.png" width="84" height="81"></a><div class="drink5"></div> 
     <a id="drink6" href=""><img src="images/drinkicon6.png" width="84" height="81"></a><div class="drink6"></div> 
     <a id="drink7" href=""><img src="images/drinkicon7.png" width="84" height="81"></a><div class="drink7"></div> 
     <a id="drink8" href=""><img src="images/drinkicon8.png" width="84" height="81"></a><div class="drink8"></div> 
    </div> 
</div> 

</body> 
</html>

는 앵커 태그는 아이디 (ID = "drink1")를 사용하고 있습니다

출처

2012-12-07 Ryan Allen

일치하는 클래스 이름을 가진 div가 될 것입니다 자신의 인스턴스 대상 사업부 지능

var id = $(this).attr('id'); var targetDiv = $('.' + id);

? 위의 코드에서'this'는 무엇입니까? –

을 이해하지 않았기 때문일 수 있습니다 :

var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 
drinksLinks.each(function() {  // perform function for each element 
    var element = $(this);   // get jquery object for the current element 
    var id = element.attr("id"); // get the id 
    var div = element.find("." + id); // find the element with class matching the id 

    $(".sugarcube").clone().appendTo(div); 
});

을하지만, 당신은 일을 참조 피하려고한다 하나의 특정 요소를 찾으려는 경우 클래스별로 몇 가지 기억하기

var sugarcube = $(".sugarcube"); 
var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 

drinksLinks.each(function() { 
    var div = $(this).next(); // get the element next to the a tag 
    sugarcube.clone().appendTo(div); 
});

나의 제안은 실제로 바로 그런 드링크 등의 사업부는 다음과 같은 작업을 수행 할 수 있습니다 항상 바로 옆에 태그에 있다고 가정하는 것입니다 DOM 검색을 할 때 선택자를 최대한 좁게 만들어보십시오. 은 비쌀 수 있습니다.
이다 가능한이 같은 ID로 DOM을 검색하는 것을 시도는 이전 버전의 브라우저에서 클래스보다는 기본적으로 빠른
당신은 내가 함께이 같은 변수에 저장, 같은 요소에 여러 참조를 만드는 경우 사탕 큐브 요소. 이 방법 당신은 결과이 도움이

희망을 을 달성하기 위해 필요한 페이지의 검색의 양 아래로 컷!

출처

2012-12-07 16:23:19

뒤늦은 응답. 우리는 이것을 쉽게 만들어 다양한 설탕 큐브 그룹을 만들기로 결정했습니다. 그런 다음 jquery를 사용하여 버튼을 누른 후 간단하게 애니메이션을 적용하십시오. –

문제가 없습니다. 스팸으로 의심되는이 질문을 회피하기 위해 답변으로 표시해주십시오. 감사! –

식별자가있는 요소를 사용하는 경우 "id"대신 "class"를 사용하십시오. "id"는 고유해야합니다. 주어진 예에서 di와 a 태그에 사용됩니다.

좋은 생각이 아닙니다. < - 죄송합니다. 같은 이름의 ID가 두 개 있다고 생각합니다.

이 광고는 저에게 효과적이었습니다. 하지만 말 그대로 다음 질문에 대답 나는 이런 식으로 뭔가 끝낼 수 있다면 귀하의 질문에 제대로

$('#drink1').clone().attr('id','drink2').appendTo('#drinks')

출처

2012-12-07 16:21:15 devanand

해당 HTML에 중복 'id'가 표시되지 않습니다. –

어떻게 이런 일에 대해 : 어떤 상황이 호출에서 해당 ID

출처

2012-12-07 16:24:01 cowls

jQuery를 사용하여 ID 이름으로 클래스 찾기

답변

관련 문제