Using jQuery to find a class by ID name

Question 1

Using jQuery to find a class by ID name

jquery class find clone classname

Ryan Allen · Dec 7, 2012 · Viewed 13.8k times · Source

Answer

Answer

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:

Try to make your selectors as narrow as possible as searching the DOM can be expensive.
Try to search the DOM by id where possible as this is is natively faster than by class in older browsers
If you are making multiple references to the same element, store it in a variable like I have with the sugarcube element. This way you cut down the amount of searches of the page you need in order to achieve the result

Hope this helps!

Question 2

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

Using jQuery to find a class by ID name

Answer

Related questions