CODEWITHSUNDEEP
javascriptjqueryif-statementmethod-chainingchain
leopic
leopic

Reputation: 3012

jQuery: if inside a chain?

I have this

if(noDelay){
  $(element).find("." + options.class).remove();
} else {
  $(element).find("." + options.class).fadeOut().remove();
}

Is there a way I could avoid repeating the sentence and only add the fadeOut() when a given condition is met?

I can't move fadeOut() till the end of the chain, which probably would've made things easier.

I'm thinking something like

$(element).find("." + options.class).(if(noDelay) fadeOut()).remove();

Thanks in advance, Leo

Upvotes: 4

Views: 2870

Answers (5)

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59131

This particular problem:

Try rethinking the logic slightly, and make the noDelay actually effect the delay.

$(element).find("." + options.class).fadeOut(noDelay ? 0 : 'normal').remove();

Though I'm not sure if remove() is necessary.

When I was doing fadeOut() tests for another question, it seemed to hide and collapse the element. remove() would completely remove the element from the DOM, but I'm not sure it is necessary if you just want to make it disappear from the document and have it stop effecting document flow (no gap where it was).

Real goal:

Also, it looks like you're planning to wrap jQuery. You'll end up wrapping code like this:

$("someElement").find(".someClass").fadeOut().remove();

...and changing it to something like:

fadeOut("someElement", { "class" : "someClass" });

...or:

var element = new SomeClass("someElement");
element.options.class = "someClass";
element.fadeOut();

Unless you're planning on reusing that particular element a lot, I think you're going to be wasting your time. jQuery has pretty efficient syntax for one-off operations, and you can always store matched elements in a temporary variable.

If you have some other purpose in mind that I'm missing, please excuse this intrusion on your design :)

Upvotes: 1

Kevin B
Kevin B

Reputation: 95047

You could do this with a $.fn.each:

$(element).find("." + options.class).each(function(){
  if (nodelay) {
    $(this).remove();
  }
  else {
    $(this).fadeOut().remove();
  }
});

however it is far less efficient than simply doing what you already are doing.

Edit: here's another way to do it:

$(element).find("." + options.class)[  noDelay ? "detach" : "fadeOut"  ]().remove();

basically, if noDelay is true, it will detach the elements before removing, else, it will fade them out before removing. Should be just as efficient as your code, just on 1 line.

Upvotes: 3

Phrogz
Phrogz

Reputation: 303381

var els = $(element).find("." + options.class);
if (!nodelay) els.fadeOut();
els.remove();

Or you could use a horrible hack:

$(element).find(…)[ nodelay ? 'somenoopfunction' : 'fadeOut' ]().remove();

Upvotes: 2

artlung
artlung

Reputation: 33833

Any objection to something like this?

var $found = $(element).find("." + options.class);
if (noDelay){
  $found.remove();
} else {
  $found.fadeOut().remove();
}

Upvotes: 2

Emre Erkan
Emre Erkan

Reputation: 8482

There is nothing documented like you want but maybe this will work for you:

$(element).find("." + options.class).fadeOut(noDelay ? 0 : 400).remove();

Why 400, because the default duration for fadeOut is 400 milliseconds. (from documentation)

Upvotes: 11

Related Questions