javascript – Using dynamic jQuery selectors

I\’m fairly new to jQuery and want to move past using explicit selectors and muddying up my code this way. I have tried a few different things but am unsuccessful at getting my selectors to dynamically function on multiple elements without having a snippet of code for each element.

My script is simply as follows:

     <script type=\"text/javascript\">
        $(document).ready(function() {


            $(\"#navItem\").mouseenter(function(){

                $(this).animate({
                    height: \"150px\"
                }, 500, \"easeOutBounce\")
            })

            $(\"#navItem\").mouseleave(function(){

                $(this).animate({
                    height: \"120px\"
                }, 500, \"easeOutBounce\")
            })
    </script>

And my HTML..

<div class=\"navWrap\">

     <div id=\"navItem\" class=\"navButton blue\"></div>
     <div id=\"navItem2\" class=\"navButton orange\"></div>
     <div id=\"navItem3\" class=\"navButton green\"></div>
     <div id=\"navItem4\" class=\"navButton red\"></div>


</div>

I left out the remainder of the script because it\’s repetitive (the same functions for the rest of the IDs you see in the HTML). My goal is to be able to dynamically select the \”current\” element that is being hovered over, rather than explicitly referencing each ID. I assume I need to use the \”this\” selector, but the documentation I\’ve found I have trouble relating back to my scenario.

Any help is appreciated, thanks all!

Rating: 4 out of 5 based on 5 ratings

Posts Related to javascript - Using dynamic jQuery selectors

• Aug 19th, 2012 Javascript dynamic link issues? Sunday AM 04:09:48


• Nov 12th, 2012 c# - How i can generate dynamic id for text field and get data from array of model in asp.net 4 mvc3 Monday AM 05:38:32


• Jul 17th, 2012 javascript - jQuery vs document.querySelectorAll Tuesday AM 05:00:30


• Aug 27th, 2012 Difference between jquery selectors Monday AM 00:19:37


• Jul 19th, 2012 jquery - Accessing elements inside dynamically created divs with HTML/Javascript Thursday AM 06:56:16


• Jul 24th, 2012 css - javascript beginner: add a dynamic style in javascript? Tuesday PM 13:24:41


• Jul 21st, 2012 performance - Javascript property access speed difference var.property vs. var["property"] Saturday AM 01:48:34


• Jul 19th, 2012 php - Opening jQuery UI Dialog box with dynamic content Thursday AM 09:15:54


• Jul 10th, 2012 javascript - Using jQuery to remove multiple textarea boxes Tuesday PM 12:13:33


• Nov 16th, 2012 javascript - Add a parameter to a dynamic function Friday PM 13:47:45

The post javascript – Using dynamic jQuery selectors appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-using-dynamic-jquery-selectors.html