Użycie jQuery do znalezienia klasy o numerze identyfikacyjnym

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

W powyższym przykładzie jest tylko przycisk pojedynczego napoju, ale mój kod zawiera osiem przycisków. Każdy z odpowiednikiem o tej samej nazwie, zaklasyfikowanym div. Co próbuję zrobić, to "dynamicznie" pobrać identyfikator znacznika zakotwiczenia (id = "drink1"), aby dołączyć obraz klonu sugarcube (img class = "sugarcube" ...) do równoważnej nazwy klasy div (klasa = "drink1"). Mam nadzieję, że to nie będzie mylące. Być może nieudane próby poniżej dadzą ci wyobrażenie o tym, co próbuję osiągnąć.Użycie jQuery do znalezienia klasy o numerze identyfikacyjnym

Próba 1

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

Próba 2 (stara się znaleźć rozwiązanie do pracy za pośrednictwem konsoli)

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

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

Przeszukałem Google i StackOverflow i nie znaleziono żadnych przykłady kodu. Dziękuję za pomoc.

Oto pełna kontekst HTML kod ...

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

Należy pamiętać, że tag kotwicy wykorzystuje identyfikator (id = "drink1"), podczas gdy div używa klasy (class = "drink1")

Źródło

2012-12-07 Ryan Allen

kontekst, w jakim jest to nazywa? Co to jest "powyższy" w powyższym kodzie? –

Gdybym odpowiedzieć na pytanie dosłownie wtedy mógłbym skończyć z czymś takim:

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); 
});

Należy jednak unikać odwoływania rzeczy według klasy, jeśli próbujesz znaleźć jeden konkretny element. Moja sugestia będzie faktycznie po prostu założyć, że div, takich jak spirytusowych1 jest zawsze tuż obok znacznika, można zrobić coś takiego:

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); 
});

Kilka rzeczy do zapamiętania:

Staraj się, aby selektory były jak najciaśniejsze, ponieważ wyszukiwanie DOM może być kosztowne.
Spróbuj przeszukać DOM przez id, gdzie to możliwe, jak to jest to natywnie szybciej niż klasy w starszych przeglądarkach
Jeśli jesteś czyniąc wiele odniesień do tego samego elementu, należy go przechowywać w zmiennej jak mam z element kostki cukru. W ten sposób można wyciąć dół ilości wyszukiwań na stronie potrzebne w celu osiągnięcia wynikiem

nadzieję, że to pomaga!

Źródło

2012-12-07 16:23:19

Spóźniona odpowiedź. Postanowiliśmy zrobić to łatwo i stworzyć różne grupy z cukrowcami. Następnie użyj jquery, aby po prostu animować je po naciśnięciu przycisku. –

Bez problemów. Jeśli to w ogóle pomogło, zaznacz proszę jako odpowiedź, aby uniknąć tego problemu jako spamu. Dzięki! –

Jeśli używasz elementów z identyfikatorem, użyj "class" zamiast "id". "id" powinno być unikalne. W podanym przykładzie jest on użyty dla di oraz tagu.

niezły pomysł! < - Przepraszam, myślałem, że są dwa identyfikatory o tej samej nazwie

to działało dla mnie. Ale możliwe, że ja nie rozumiem pytanie poprawnie

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

Źródło

2012-12-07 16:21:15 devanand

Nie widzę duplikatu "id" w tym html. –

Jak o coś takiego:

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

Int jego docelowej instancji div będzie div z nazwą klasy pasującej że identyfikator

Źródło

2012-12-07 16:24:01 cowls

Użycie jQuery do znalezienia klasy o numerze identyfikacyjnym

Odpowiedz

Powiązane problemy