Verwenden von jQuery zum Suchen einer Klasse nach ID-Name

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

Im obigen Beispiel gibt es nur die Schaltfläche für einen Getränk, aber mein Code enthält acht Schaltflächen. Jeder mit einem gleichnamigen klassifizierten div. Was ich versuche ist "dynamisch" die ID des Anchor - Tags (id = "drink1") zu nehmen, um einen Klon sugarcube image (img class = "sugarcube" ...) in den entsprechenden Klassennamen div (class = "drink1"). Ich hoffe, das klingt nicht verwirrend. Vielleicht geben Ihnen die folgenden erfolglosen Versuche eine Vorstellung davon, was ich erreichen möchte.Verwenden von jQuery zum Suchen einer Klasse nach ID-Name

Versuch 1

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

Versuch 2 (Versuch, eine Arbeitslösung über die Konsole zu finden) Proben keine Code

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

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

Ich habe gesucht Google und Stackoverflow und haben nicht gefunden. Danke für Ihre Hilfe.

Hier ist der komplette HTML-Code Kontext ...

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

Bitte beachten Sie, dass der Anker-Tag verwendet eine ID (id = "drink1"), während die div eine Klasse verwendet (class = "drink1")

Quelle

2012-12-07 Ryan Allen

In welchem Kontext heißt das? Was ist das im obigen Code? –

Wenn ich Ihre Frage beantworten buchstäblich dann könnte ich mit etwas am Ende wie folgt:

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

Allerdings sollten Sie versuchen, die Dinge zu vermeiden Referenzierung nach Klasse, wenn Sie versuchen, ein bestimmtes Element zu finden. eigentlich nur anzunehmen, wäre mein Vorschlag, dass ein div wie drinks1 zum einem Tag immer direkt neben ist, dann kann man so etwas wie:

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

Ein paar Dinge zu erinnern:

Versuchen Sie, Ihre Selektoren so schmal wie möglich zu machen, da die Suche nach DOM teuer sein kann.
Versuchen Sie das DOM von id, wo möglich, da diese ist nativ schneller als nach Klasse in älteren Browsern
Wenn Sie macht mehrere Verweise auf das gleiche Element, speichern sie in einer Variable suchen, wie ich mit haben das Sugarcube-Element. Auf diese Weise schneiden Sie den Betrag, der Durchsuchungen von der Seite, die Sie benötigen, um das Ergebnis

hoffe, das hilft zu erreichen!

Quelle

2012-12-07 16:23:19

Eine verspätete Antwort. Wir haben uns entschieden, dies zu vereinfachen und eine Vielzahl von Zuckerwürfelgruppen zu schaffen. Verwenden Sie dann jquery, um sie einfach zu animieren, nachdem die Schaltfläche gedrückt wurde. –

Keine Probleme. Sollte dies jedoch helfen, markieren Sie bitte als Antwort, um zu vermeiden, dass diese Frage als Spam eingestuft wird. Vielen Dank! –

Wenn Sie Elemente mit einem Bezeichner verwenden, verwenden Sie "Klasse" anstelle von "ID". "ID" sollte eindeutig sein. In dem gegebenen Beispiel wird es für di und auch für a verwendet.

keine gute Idee! < - Sorry, ich dachte, es gibt zwei IDs mit dem gleichen Namen

das war für mich arbeiten. Aber es ist möglich, dass ich Ihre Frage nicht richtig verstanden haben

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

Quelle

2012-12-07 16:21:15 devanand

Ich sehe keine doppelte ID in diesem HTML. –

Wie wäre es etwa so:

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

Int seine Instanz Ziel div werden die divs mit dem Klassennamen sein, dass die ID passende

Quelle

2012-12-07 16:24:01 cowls

Verwenden von jQuery zum Suchen einer Klasse nach ID-Name

Antwort

Verwandte Themen