How to use .each() in jQuery plugin

Question

I am building a navigation feature that loosely resembles the hoverable sidenav button menu in w3schools (https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp). I am configuring my version to take the form of a jQuery plugin. So far, I was able to come up with a basic plugin that enables object options for up to 4 default sidenav tabs. However, I want to enable the user to create additional tabs, without having to manually create a new function every time he/she adds a new div. How should I go about enabling this? Is it possible to use "this.each(function() {})" in some form to apply the function to each of the tabs? If so, how can this be done? If not, what are your recommendations? See code below. Thanks so much!

    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>
    <div id="block3" class="block"></div>
    <div id="block4" class="block"></div>
    <div id="block5" class="block"></div>

    <script>
      $("#block1").slideHover({
        backgroundColor: "green"
      });
      $("#block2").slideHover({
        top: 120
      });
      $("#block3").slideHover({
        top: 180
      });
      $("#block4").slideHover({
        top: 240
      });
      $("#block5").slideHover({
        top: 240
      });
    </script>

$(document).ready(function(){

  $( "#block1" ).mouseover(function() {
    $( "#block1" ).animate({ "left": "+=50px" }, "fast" );
  });
  $( "#block1" ).mouseout(function(){
    $( "#block1" ).animate({ "left": "-=50px" }, "fast" );
  });

  $( "#block2" ).mouseover(function() {
    $( "#block2" ).animate({ "left": "+=50px" }, "fast" );
  });
  $( "#block2" ).mouseout(function(){
    $( "#block2" ).animate({ "left": "-=50px" }, "fast" );
  });

  $( "#block3" ).mouseover(function() {
    $( "#block3" ).animate({ "left": "+=50px" }, "fast" );
  });
  $( "#block3" ).mouseout(function(){
    $( "#block3" ).animate({ "left": "-=50px" }, "fast" );
  });

  $( "#block4" ).mouseover(function() {
    $( "#block4" ).animate({ "left": "+=50px" }, "fast" );
  });
  $( "#block4" ).mouseout(function(){
    $( "#block4" ).animate({ "left": "-=50px" }, "fast" );
  });
});

(function ( $ ) {

    $.fn.slideHover = function( options ) {

        var settings = $.extend({
          position: "absolute",
          backgroundColor: "#abc",
          padding: "25px",
          left: "-95px",
          width: "100px",
          radius: "5px",
          top: "60px"
        }, options );

        return this.css({
          position: settings.position,
          backgroundColor: settings.backgroundColor,
          padding: settings.padding,
          left: settings.left,
          width: settings.width,
          radius: settings.radius,
          top: settings.top
        });
    };

}( jQuery ));

score 1 · Accepted Answer · answered Apr 06 '19 at 07:04

1

You mean this?

$(".block").mouseover(function() {
  $(this).animate({ "left": "+=50px" }, "fast" );
});

which with delegation (needed if dynamic) becomes

$("#someContainerDivId").on("mouseover",".block",function() {
  $(this).animate({ "left": "+=50px" }, "fast" );
});

answered Apr 06 '19 at 07:04

mplungjan

169,008
28
173
236

Holy cow that worked. Thank you! So how did you know to add "(this).animate" instead of "(".block").animate"? I understand the concept of this, but how did you know to use that instead? – JS_is_awesome18 Apr 06 '19 at 07:11
jQuery exposes the found element as $(this) inside the handler. Please visit https://api.jquery.com/ and study the functions - also have a look here: https://stackoverflow.com/questions/12481439/jquery-this-keyword - also I have been using jQuery since it came out – mplungjan Apr 06 '19 at 07:26

How to use .each() in jQuery plugin

1 Answers1