sending parameters to a jquery function

Question

I have the following function which works very well within a $(document).ready(function(){

$('.threadWrapper > .littleme').click(function() {
        $(this).next().toggle();
        $(this).toggle();
        $('.littleme').not(this).next().hide();
        $('.littleme').not(this).show();

        // re-run masonry
        $('#mainContent').masonry();

        return false;
    }).next().hide();

What I want to be able to do is call this from inline javascript Each div element that contains the threadWrapper class also has its own id. What I want to do is to be able to trigger this function using inline javascript calls and sending an id as a parameter. For example:

$(function(id){
$('#id > .littleme').next().toggle();
$('#id > .littleme').toggle();
etc. etc.
});

Answer 1

Just concatenate the strings for the selector like this:

function toggleStuff(id) {
  $('#' + id + ' > .littleme').next().toggle();
  $('#' + id + ' > .littleme').toggle();
  //etc. etc.
}

Define this outside your document.ready function so it's available. Also, you can shorten this if you want as well down to:

  $('#' + id + ' > .littleme').toggle().next().toggle();

Answer 2

You can just use a regular javascript function:

function Something(id) // id is a jquery object
{
  id.find('.littleme').next().toggle();
  id.find('.littleme').toggle();
  etc. etc.
}

Answer 3

There is no need to call any inline javascript from your elements. What I would recommend is the following:

$('.threadWrapper').click(function() {
    $(this).find(".littleme").next().toggle();
    $(this).find(".littleme").toggle();
    etc. etc.
});

Looking at your selectors, .littleme is a direct descendant of .threadWrapper. So if you bind a click event to all .threadWrappers you can select the .littlemes by searching within the current context.

Also, if you're interested, those two statements can be consolidated using .end:

$(this).find(".littleme").next().toggle().end().toggle();