how to create own function in JQuery?

Question

how to create own function and call it another function? like-

$('.mycls li').hover(function() {    
var divid = $(this).find('li').attr('some_attr');
call myfunc(divid);
});

function myfunc(divid)
{
$(divid).show();
//I want to hide rest all divs 
$('div#info1').hide();
$('div#info2').hide();
$('div#info3').hide();
}

I have 2 questions one is how to implement this logic in jquery second is which attribute can be used to reference the specific li to specific div

my divs are as-

<div id="info1">
//some information
</div>
<div id="info2">
</div>
....

You have already answered your first question. As for the second... I don't understand, please clarify. I think you have to show more of your HTML markup. — Felix Kling
– Felix Kling, Commented Jun 23, 2010 at 8:04
@Kling I just want to call to myfunc() on mouseover of li items. — nectar
– nectar, Commented Jun 23, 2010 at 8:13

Sarfraz · Accepted Answer · 2010-06-23 08:05:59Z

5

Your functions should be able to operate on the wrapped set like other methods/functions of jquery. Consider a plugin, it is easy:

jQuery Plugin Tutorial

Or see:

Defining your own functions in jQuery

answered Jun 23, 2010 at 8:05

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nectar Over a year ago

have a look on my code is it correct- <script> $('.smenu li').mouseover( function(){ myfunnc(); }); jQuery.fn.myfunc = function() { $('div#telcosinfo').show("medium"); } </script>

Jurakin · Accepted Answer · 2021-08-12 12:32:43Z

2

I wrote this:

jQuery.fn.doSomeStuff = function(options, callback) {
    var $elem = $(this[0]);
    var args = options || {};
    
    // doSomeStuff
    alert("DOM element: "+$elem.html());
    alert("this ia a parameter:"+ args.aParameter);
    
    if (typeof callback == 'function') { // make sure the callback is a function
        callback.call(this); // brings the scope to the callback
    }
    return $elem; //ensures jquery chainability
};

define your own function
specify parameters and callback
ensure jquery chainability

You can try it here

edited Aug 12, 2021 at 12:32

Jurakin

1,1711 gold badge10 silver badges22 bronze badges

answered Sep 28, 2013 at 14:05

Marco Allori

3,32236 silver badges25 bronze badges

Comments

Mario Menger · Accepted Answer · 2010-06-23 09:03:47Z

1

There is no keyword call that you need to use to call a function. So just using

myfunc(divid);

to call your function will do.

To link your li-s to your div-s you can use an id naming scheme, for instance, give all your li-s ids beginning with a d and all your div ids beginning with "info" as you have them, but have the bits after that be the same.

<li id='d1'> </li>
<li id='d2'> </li>
<li id='d3'> </li>

<div id='info1'></div>
<div id='info2'></div>
<div id='info3'></div>

and then use

$('.mycls li').hover(function() {      
    // get the number part of the li id and use it to
    // build the divid by appending it to "info"
    var divid = "info" + $(this).attr('id').slice(1);
    myfunc(divid);   
});   

function myfunc(divid)   
{
     $("#" + divid).show();   
     //hide all divs that do not have id=divid
     $("div:not(#" + divid + ")").hide();
}

edited Jun 23, 2010 at 9:03

answered Jun 23, 2010 at 8:07

Mario Menger

5,9022 gold badges30 silver badges31 bronze badges

3 Comments

nectar Over a year ago

it means div-s id must be like 1,2,3...?

Mario Menger Over a year ago

no, div-s ids must be like info1,info2,info3 - I've updated my answer to make this clearer

nectar Over a year ago

ya I got it...but that is not working even when I am passing var divid="info1"; myfunc(divid); it is not calling the function but all div-s of the page are getting disappeared.

Collectives™ on Stack Overflow

how to create own function in JQuery?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related