如何在jQuery插件中使用.each（）

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

Answer 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" );
});