Wednesday, 14 July 2010

JQuery for each div with class, do some processing



Here is some JQuery i recently wrote to do some styling changes.

The code basically fires an event on a select box change, and then for every div with the class "localize", if the lang attribute value is not the same as the selection in the option box, it hides that div and makes sure any div where the lang attribute value is the same as the selection is showing.

[javascript]
//get the value of the selection box
var selectedValue = $('#cultureSelector').val();

//for each div with class localize
$('div.localized').each(function() 
{
     //get the value of the lang attr
     var langAttrVal = $(this).attr("lang");

     if(langAttrVal.indexOf(selectedValue) == -1) {
          $(this).attr('style', '');
          $(this).addClass('displaynone');
     }
     else 
     {
          $(this).removeClass('displaynone');
     }
});

[/javascript]