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")
this
dans le code ci-dessus?
OriginalL'auteur Ryan Allen | 2012-12-07
Vous devez vous connecter pour publier un commentaire.
Si je réponds à votre question, littéralement, alors je pourrais retrouver avec quelque chose comme ceci:
Cependant, vous devriez essayer d'éviter de référencement de choses en classe, si vous essayez de trouver un élément spécifique. Ma suggestion serait de supposer qu'un div comme drinks1 est toujours juste à côté de la balise, puis vous pouvez faire quelque chose comme:
Un couple de choses à retenir:
peut être coûteux.
est nativement plus rapide que par la classe dans les navigateurs plus anciens
faire de multiples références à la même élément, de le stocker dans un
variable comme je l'ai avec le sugarcube élément. De cette façon, vous couper
en bas de la quantité de recherches de la page que vous avez besoin afin de parvenir à
le résultat
Espérons que cette aide!
Pas de problèmes. Si cela a permis à tous mais s'il vous plaît marquer comme réponse afin d'éviter cette question d'aller vers le bas comme du spam. Merci!
OriginalL'auteur beyond-code
Si vous êtes en utilisant des éléments avec un identifiant, puis utiliser "classe" au lieu de "id".
"id" doit être unique. Dans l'exemple donné est utilisé pour la di et aussi l'une balise.
pas une bonne idée! <- Désolé, je pensais il y a deux codes avec le même nom
c'était de travailler pour moi. Mais il est possible que je ne comprends pas votre question correctement
id
en html.OriginalL'auteur devanand
Comment quelque chose comme cela:
Int sa cible d'instance div seront les divs avec le nom de la classe correspondant à celle ID
OriginalL'auteur cowls