Using jQuery to find a class by ID name

Question

```

``` 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).par…

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

Using jQuery to find a class by ID name

Solution

Problem