Utilisation de jQuery pour trouver une classe par le nom de l'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>

Dans l'exemple ci-dessus, il est l'unique bouton boisson, mais mon code contient huit boutons. Chacun avec un correspondant du même nom classé div. Ce que j'essaie de faire est "dynamique" saisir l'id de la balise d'ancrage (id="drink1") pour ajouter un clone sugarcube image (img class="sugarcube" ...) dans l'équivalent de la classe nom de la div (class="drink1"). J'espère que ce n'est pas à confusion. Peut-être les tentatives infructueuses ci-dessous vous donnera une idée de ce que je suis en train de réaliser.

Tentative 1

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

Tentative 2 (en essayant de trouver une solution de travail via la console)

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

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

J'ai cherché sur Google et StackOverflow et n'ai pas trouvé d'exemples de code. Je vous remercie pour votre aide.

Voici le code HTML complète contexte...

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

Veuillez noter que la balise d'ancrage utilise un id (id="drink1"), alors que la div utilise une classe (class="drink1")

Dans quel contexte est-ce qui est appelé? Qu'est-ce que this dans le code ci-dessus?

OriginalL'auteur Ryan Allen | 2012-12-07