Making jquery plugin for some HTML elements

Question

I want to create a jquery plugin and use that for some HTML elements in my page. This is my HTML code :

<select class="test">
    <option>
        111
    </option>
    <option>
        222
    </option>
    <option>
        333
    </option>
</select>
<select class="test">
    <option>
        444
    </option>
    <option>
        555
    </option>
</select>

I want to use my plugin for select elements. This is my plugin sample :

(function ( $ ) {
        $.fn.testplug = function() {
            var res = "";
            this.children("option").each(function(){
                res+=$(this).text()+"#";
            });
            alert(res);
        };
    }( jQuery ));

And for using it :

$(".test").testplug();

Now i aspect to have two res values,one of them should be 111#222#333# and another should be 444#555#, but i have one result and it's 111#222#333#444#555#. What should i do for getting my desired result? Link to jsfiddle

Anton · Accepted Answer · 2013-10-01 08:43:25Z

1

You are selecting both so you must specify which one you want to use

$('.test:first').testplug() //111#222#333

and

$('.test:last').testplug() //444#555#

or

$('select').on('change',function(){
    $(this).testplug();
});

or you could loop through every .test like this

$('.test').each(function(){
$(this).testplug();
});

You can also rewrite the code like this, to loop through the lists then children and alert at the end of every list

 (function ( $ ) {
        $.fn.testplug = function() {
            this.each(function(){
                  var res = "";
                $(this).children('option').each(function(){
                          res+=$(this).text()+"#";
                });
                 alert(res);
            });
        };
    }( jQuery ));

DEMO

edited Oct 1, 2013 at 8:43

answered Oct 1, 2013 at 8:38

Anton

32.6k5 gold badges47 silver badges54 bronze badges

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

2 Comments

Saman Gholami Over a year ago

Yes, it's working but i have more than 2 select elements,also i don't want to using 'change' event.

Anton Over a year ago

Check update @SamanGholami if you want to use your original code you can do this $('.test').each(function(){ $(this).testplug(); });

Chokchai · Accepted Answer · 2013-10-01 08:56:02Z

1

You mean 2 alert on one called plugin function ?

   $.fn.testplug = function() {
        $(this).each(function(){
           var res = "";
           $(this).children("option").each(function(){
              res+=$(this).text()+"#";
           });
           alert(res);
        });
    };

edited Oct 1, 2013 at 8:56

answered Oct 1, 2013 at 8:44

Chokchai

1,72212 silver badges12 bronze badges

1 Comment

Saman Gholami Over a year ago

Thank you for your reply :) You should put res in loop

Collectives™ on Stack Overflow

Making jquery plugin for some HTML elements

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related