jQuery If, ElseIf, and Else plugin
Update
Guys, I have to admit I created silly prototypes while all I need were much more simpler than I though :) Enjoy last version!
-------------------------------------
Try to imagine a page like this one:
.. and now try to imagine something like this:
... now, try to imagine I created a plugin like this:
... and now try to enjoy it :D
Kind Regards
Guys, I have to admit I created silly prototypes while all I need were much more simpler than I though :) Enjoy last version!
-------------------------------------
Try to imagine a page like this one:
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
.. and now try to imagine something like this:
function oddNumbers(){
// return true if element contain an odd number
return $(this).text() & 1;
};
$(function(){
$("div")
.If(function(){return $(this).text() == "3" || $(this).text() == "5"})
.text("match the 3 or 5 check")
.ElseIf(oddNumbers)
.text("odd numbers")
.ElseIf(function(){return $(this).text() == 2})
.Do(function(){ // if you need a closure ...
$(this).text("text is equal 2");
})
.ElseIf(function(){return $(this).text() == 6})
.text("match the 6 condition")
.Else()
.text("this is 4 or 8");
;
})
... now, try to imagine I created a plugin like this:
;jQuery.fn.extend({
// Andrea Giammarchi - Mit Style Licence - V0.1f
If:function(fn){
var $ = this.filter(fn);
$.__If__ = this.filter(function(){return !~$.index(this)});
return $;
},
ElseIf:function(fn){
var $ = this.__If__.filter(fn);
$.__If__ = this.__If__.filter(function(){return !~$.index(this)});
return $;
},
Else:function(){
return this.__If__;
},
Do:jQuery.fn.each
});
... and now try to enjoy it :D
Kind Regards
posted by Andrea Giammarchi at 1:45 PM
RSS 2.0
6 Comments:
This was my solution for the same thing:
jQuery.fn.extend({
if_: function (cond)
{
if ($.isFunction(cond)) { cond = cond.call(this); }
this.if_CondMet = !!cond;
return this.pushStack(cond ? this : []);
},
else_: function (cond)
{
var _this = this.end();
return _this.if_CondMet ?
_this.pushStack([]):
_this.if_(arguments.length ? cond : 1);
},
});
Note how the .else_() method doubles as an "elseif" if you pass an argument to it.
Már Örlygsson, with the same output and this code
$(function(){
$("div")
.if_(function(){return $(this).text() == "3" || $(this).text() == "5"})
.text("1 - match the 3 or 5 check")
.else_(oddNumbers)
.text("2 - odd numbers")
.else_(function(){return $(this).text() == 2})
.text("3 - text is equal 2")
.else_(function(){return $(this).text() == 6})
.text("4 - match the 6 condition")
.else_()
.text("5 - this is 4 or 8");
;
})
nothing works as expected, the last in the chain overwrite everything or, without, nothing happen. Am I missing something?
It seems we're calling the condition-function differently ... and thus solving slightly different problems. :-)
Yours uses `this.filter(fn)`, always running `fn` `this.length` times to build (filter) a new jQuery collection to pass into the condition block.
Mine performs a single `fn.call(this)` returning a simple boolean to decide if the current jQuery object should be passed into the condition block.
Yours is really a beefed up `.filter()`, while mine is a more an implementation of traditional traditional if-else directives.
Here's how it might be uesd:
var cond1 = function(){ return this.length % 2; },
cond2 = function(){ return !cond1.call(this.slice(1)); };
jQuery('p:first')
.if_(cond1)
.css('color', 'red')
.else_(cond2)
.css('color', 'green')
.else_()
.css('color', 'blue')
.end();
Off topic. may i remind you of my question I sent on facebook? (since I don't have your email.)
Hi Lars, I replied on facebook but generally speaking, please do not write off topics replies, thank you :-)
Post a Comment
Links to this post:
Create a Link
<< Home