Jquery: filter function

Question

I go through a list of classes using the filter function. if the drop down is empty then an error styling is added.

problem. I would like to hide and show other div id's if the condition is fulfilled, i.e if all the dropdowns contain a selected value

This is my code for adding styling to an empty dropdown

 $(".dropdown_select").filter(function(){
 return $(this).val() == "";
 }).css("border-color", "#FF0000");

But how do i go about hiding and showing a other two div id's?? i.e only if all dropdowns are filled, i would like to

$(".step-2").fadeIn("slow");
$(".step-1").fadeOut("slow");

Tomalak · Accepted Answer · 2013-03-11 13:07:36Z

1

For styling I'd recommend using toggleClass() with a function argument instead of filter() and css():

$(document).on("change", ".dropdown_select", function () {
  var $emptyOnes = $(".dropdown_select")
                   .filter(function () { return this.value == ""; });

  if ($emptyOnes.length == 0) {
    $(".step-1").fadeOut("slow");
    $(".step-2").fadeIn("slow");
  } 

  $(this).toggleClass("empty", this.value == "");
});

where tre CSS definition reads:

.empty {
  border-color: #FF0000;
}

answered Mar 11, 2013 at 13:07

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

3 Comments

Victor Njoroge Over a year ago

$emptyOnes.length is always evaluating to 0.....im not sure but as i read i think its because its not real array, from this post stackoverflow.com/a/2528893/1214535 ...have a look at this fiddle jsfiddle.net/theunfeelingsoul/CJAhz/3

Tomalak Over a year ago

No. $emptyOnes.length is only 0 when all .dropdown_select elements have a value. Which is what you wanted (quote "i.e only if all dropdowns are filled, i would like to…").

Victor Njoroge Over a year ago

yea that's what i want but that's not happening, whether the dropdown has a value or not it still evaluates to 0...i dont know why. have a look at the jsfiddle link and see...

sasi · Accepted Answer · 2013-03-11 12:18:16Z

1

var $children = $(".dropdown_select").children();

if($children.length === $children.filter(".dropdown_select").length) {
   $(".step-2").fadeIn("slow");
   $(".step-1").fadeOut("slow");
}

answered Mar 11, 2013 at 12:18

sasi

4,3784 gold badges30 silver badges48 bronze badges

1 Comment

Victor Njoroge Over a year ago

I dont understand what $children.filter().length does because is resulting to 0 all the time....??

Collectives™ on Stack Overflow

Jquery: filter function

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related