Geek Answers Handbook

Using jQuery to search for a class by identifier name

<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 above example, there is only a single drink button, but my code contains eight buttons. Each of them has a corresponding class of the same name. What I'm trying to do is “dynamically” capture the identifier of the attached tag (id = "drink1") to add the clone sugar image (img class = "sugarcube" ...) to the equivalent class name div (class = " drink1 "). Hope this is not confusing. Perhaps the unsuccessful attempts below will give you some idea of ​​what I'm trying to achieve.

Attempt 1

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

Attempt 2 (attempt to find a working solution through the console)

 var className = $(this).attr("id"); console.log(className); console.log($(this).parent().children("div").hasClass(className));

I searched Google and StackOverflow and did not find any sample code. Thank you for your help.

Here's the full context of the HTML ...

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

Note that the anchor tag uses id (id = "drink1"), while the div uses the class (class = "drink1")

+7
source share
3 answers

If I answer your question literally, I may 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 was to actually assume that a div, such as drinks1, is always next to the 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 few things to remember:

  • Try to make your selectors as narrow as possible, as finding a DOM can be expensive.
  • Try searching the DOM by id if possible. is faster than class in older browsers.
  • If you are making multiple references to the same element, store it in a variable, as I have with the sugarcube element. Thus, you reduce reduce the number of searches of the necessary page to achieve a result

Hope this helps!

+4
source

If you are using elements with an identifier, use "class" instead of "id". "id" must be unique. In this example, it is used for di, as well as a tag.

Not bad idea! <- Sorry, I thought there were two identifiers with the same name

it worked for me. But it is possible that I did not understand your question correctly.

  $('#drink1').clone().attr('id','drink2').appendTo('#drinks')
+2
source

How about something like this:

 var id = $(this).attr('id'); var targetDiv = $('.' + id);

Int its target destination div will be a div with the class name matching the ID

+1
source

More articles:


All Articles