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");

score 1 · Answer 1 · answered Mar 11 '13 at 12:18

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 '13 at 12:18

sasi

4,192
4
28
47

I dont understand what $children.filter().length does because is resulting to 0 all the time....?? – Victor Njoroge Mar 11 '13 at 12:40

score 1 · Accepted Answer · answered Mar 11 '13 at 13:07

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 '13 at 13:07

Tomalak

332,285
67
532
628

$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 http://stackoverflow.com/a/2528893/1214535 ...have a look at this fiddle http://jsfiddle.net/theunfeelingsoul/CJAhz/3/ – Victor Njoroge Mar 11 '13 at 13:59
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…"*). – Tomalak Mar 11 '13 at 14:15
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... – Victor Njoroge Mar 11 '13 at 14:34

Jquery: filter function

2 Answers2