CODEWITHSUNDEEP
jqueryhtmlcss
aelor
aelor

Reputation: 11116

How to call a function on a div with a particular id

I have a function called 

function add_slider_here(){
}

which when called creates a progress bar.

Now I want to call the function with respect to a id of the div and attach the progress bar to it.

I see the way of doing it would be to append the created progress bar to the div which I already have. What is the best way to achieve something like this:

I have two divs with ids say id1 and id2

<div id="id1"></div> 
content here

<div id="id2"></div>

Now what I want is that when I call a function like :

$("#id1").add_slider_here();

It should actually add the slider in that div only. how to create a function like that.

Upvotes: 1

Views: 2219

Answers (3)

Vipin Kumar Soni
Vipin Kumar Soni

Reputation: 834

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
        $.fn.add_slider_here = function(){
            $(this).html("<span>slider html</span>");
        }
        $(function(){
            $('#id1').add_slider_here();
        });
        </script>
    </head>
    <body>
        <div id="id1"></div>
        <div id="id2"></div>
    </body>
</html>

Upvotes: 0

Manoj
Manoj

Reputation: 5071

Try this

(function ( $ ) {
    $.fn.add_slider_here = function() {
        //code here
    };

}( jQuery ));

Now you can use like this

$(selector).add_slider_here();

Upvotes: 2

jsist
jsist

Reputation: 5253

You can create a jQuery plugin as follows:

$.fn.add_slider_here = function(){
    var ele = this; // ele will be jQuery object for your id
    // rest of your code to add progress bar from add_slider_here function in this element
}

Now you can call it like

$('#id1').add_slider_here();

Hope it helps...

Upvotes: 2

Related Questions