Question

I’m quite new to jQuery and i need to solve a selection problem. I have many triggers with class="trigger" on which jQuery plugin function myFunc is invoked.

Triggers can be images or links and each trigger must refer to an input field (textbox or textarea) with class="target".

Here is an example, but please note that targets may precede or follow triggers eventually with some elements in between:

<a class="trigger">trigger 1</a>
<input class="target" type="text" /><!-- target for trigger 1 -->

<a class="trigger">trigger 2</a>
<textarea class="target"></textarea><!-- target for trigger 2 -->

The problem is i need to pass a targetSelector (like .next('.target') or somthing else depending on DOM) to my plugin, in order to get each target element for each trigger:

$('.trigger').myFunc({ // Plugin invokation
   targetSelector : <code here> // Pass something like .next('.target')
});

(function($) { // Plugin defininition
    $.fn.myFunc = function(options) {

       this.each(function() { // Iterate each trigger
          var target = <code here>; // Get target for current trigger
       };

    };
})(jQuery);

Answer 1

I would suggest you make targetSelector a function, where this refers to the current .trigger and it returns the corresponding target:

$('.trigger').myFunc({ // Plugin invokation
   targetSelector : function() {
       return $(this).next('.target')
   }
});

Which can be implemented with .call() ^[docs]:

$.fn.myFunc = function(options) {

   this.each(function() { // Iterate each trigger
      var target = options.targetSelector.call(this);
   };

};

This gives you the greatest flexibility and you can perform any DOM traversal you want in this function.

Of course you can make it more sophisticated and make targetSelector accept both, a selector string and a function, and then handle the value accordingly.

Example:

$.fn.myFunc = function(options) {
   var selectorFunc = $.isFunction(options.targetSelector) ? 
                         options.targetSelector :
                         function() {
                            return $(options.targetSelector);
                         };

   this.each(function() { // Iterate each trigger
      var target = selectorFunc.call(this);
   };

};