Menu
<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>
In the example above there is only the single drink button, but my code contains eight buttons. Each with a corresponding same-named classed div. What I'm trying to do is "dynamically" grab the id of the anchor tag (id="drink1") to append a clone sugarcube image (img class="sugarcube" ...) into the equivalent class name div (class="drink1"). I hope that doesn't sound confusing. Perhaps the unsuccessful attempts below will give you some idea of what I am trying to achieve.
Attempt 1
$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));
Attempt 2 (trying to find a working solution via the console)
var className = $(this).attr("id");
console.log(className);
console.log($(this).parent().children("div").hasClass(className));
I've searched Google and StackOverflow and haven't found any code samples. Thank you for your help.
Here's the complete HTML code context...
<!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>
Please note that the anchor tag uses an id (id="drink1") while the div uses a class (class="drink1")
983
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.
on('click', function (e) { var id = $(e. target). attr('id'); console. log(id); });
If I answer your question literally then I might end up with something like 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);
});
However, you should try to avoid referencing things by class if you are trying to find one specific element. My suggestion would be to actually just assume that a div such as drinks1 is always right next to the a tag, then you can do something like:
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);
});
A couple of things to remember:
Hope this helps!
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
