Save a reference to a particular selector

Question

Ok, what I am after is quite simple. I have click handler for multiple radio group sets. Inside the handler I am passing some parameters to a functions parameters references are relative to the group set but their path are the same. So I basically have:

$(document).ready(function(){
    $("input[name='radioGroup1']").click(function(){        
        updateWalletInfo(
            $(this).val(),
            $(this).parent().parent().find(".cSec .f_class a").text(),
            $(this).parent().parent().parent().find(".cSec .flight-time").text(),
            $(this).parent().parent().parent().find(".cSec .city").text(),
        );
    });

    $("input[name='radioGroup2']").click(function(){        
        updateWalletInfo(
            $(this).val(),
            $(this).parent().parent().find(".cSec .f_class a").text(),
            $(this).parent().parent().parent().find(".cSec .flight-time").text(),
            $(this).parent().parent().parent().find(".cSec .city").text(),
        );
    });
});

What I want to do is to save reference to particular item under $(document).ready() so if I change the path I wouldn't have to change it in each handler. Like what I am after is like:

   $(document).ready(function(){
        var value = $(this).val();
        var f_class = $(this).parent().parent().find(".cSec .f_class a").text();
        var f_time =$(this).parent().parent().parent().find(".cSec .flight-time").text();
        var f_city = $(this).parent().parent().parent().find(".cSec .city").text();

        $("input[name='radioGroup1']").click(function(){        
            updateWalletInfo(value,f_class,f_time,f_city);
        });

        $("input[name='radioGroup2']").click(function(){        
            updateWalletInfo(value,f_class,f_time,f_city);
        });
    });

I know the this operator will not work there, but I thought that makes my point more clear. I am even happy if I could only remove the redundancy for .parent().parent().find(".cSec .????").text() bit.

Answer 1

You can replace parent().parent(). with closest()..

Also pass a reference to the jQuery element to the updateWalletInfo function and get all the values inside that function, rather than passing all values. Something like

$(document).ready(function(){
    $("input[name='radioGroup1']").click(function(){        
        updateWalletInfo($(this));
    });

    $("input[name='radioGroup2']").click(function(){        
        updateWalletInfo($(this));
        );
    });

    function updateWalletInfo(elem)
    {
        var value = elem.val();
        var f_class = elem.closest("selector").find(".cSec .f_class a").text();
        var f_time = elem.closest("selector").find(".cSec .flight-time").text();
        var f_city = elem.closest("selector").find(".cSec .city").text();
    }
});

If you are taking all the values from the same parent element then you can take

var parentElem = elem.closest("selector");
var f_class = parentElem.find(".cSec .f_class a").text();
var f_time = parentElem.find(".cSec .flight-time").text();
var f_city = parentElem.find(".cSec .city").text();

Answer 2

You could register an impromptu jQuery plugin function.

$.fn.registerMyClick = function() {
  $(this).each(function() {
    var $this = $(this);
    $this.click(function() {
      updateWalletInfo(
        $this.val(),
        $this.parent().parent().find(".cSec .f_class a").text(),
        $this.parent().parent().parent().find(".cSec .flight-time").text(),
        $this.parent().parent().parent().find(".cSec .city").text(),
      );
    });
  });

  return this;
}

Depending on your HTML, it could also be simplified as:

$.fn.registerMyClick = function() {
  $(this).each(function() {
    var $this = $(this);
    $this.click(function() {
      $parent = $this.closest('.cSec');
      updateWalletInfo(
        $this.val(),
        $(".f_class a", $parent).text(),
        $(".flight-time, $parent").text(),
        $(".city", $parent).text(),
      );
    });
  });

  return this;
}

Then you use it like this:

$("input[name='radioGroup1']").registerMyClick();
$("input[name='radioGroup2']").registerMyClick();