Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 4th, 2012  |  syntax: None  |  size: 2.57 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How can i shorten or simplify my jquery statements?
  2. <div class="custom-select list-one">
  3.     <span>Select Option</span>
  4.     <ul>
  5.         <li>List Item 1</li>
  6.         <li>List Item 2</li>
  7.         <li>List Item 3</li>
  8.         <li>List Item 4</li>
  9.         <li>List Item 5</li>
  10.         <li>List Item 6</li>
  11.         <li>List Item 7</li>
  12.         <li>List Item 8</li>
  13.         <li>List Item 9</li>
  14.         <li>List Item 10</li>
  15.         <li>List Item 11</li>
  16.         <li>List Item 12</li>
  17.     </ul>
  18. </div>
  19.  
  20.  
  21. <div class="custom-select list-two">
  22.     <span>Select Option</span>
  23.     <ul>
  24.         <li>List Item 1</li>
  25.         <li>List Item 2</li>
  26.         <li>List Item 3</li>
  27.         <li>List Item 4</li>
  28.         <li>List Item 5</li>
  29.         <li>List Item 6</li>
  30.         <li>List Item 7</li>
  31.         <li>List Item 8</li>
  32.         <li>List Item 9</li>
  33.         <li>List Item 10</li>
  34.         <li>List Item 11</li>
  35.         <li>List Item 12</li>
  36.     </ul>
  37. </div>
  38.        
  39. //Function for .list-one
  40. $(function() {
  41.  
  42.     $('.custom-select.list-one').click(function() {
  43.         $('.custom-select.list-one ul').slideToggle('fast');
  44.     });
  45.  
  46.     $('.custom-select.list-one ul li').click(function() {
  47.         $(this).addClass('selected');
  48.         $('.custom-select.list-one span')
  49.         .html($('.custom-select.list-one ul li.selected').html());
  50.         $(this).removeClass('selected');
  51.     });
  52.  
  53. });
  54.  
  55. // Function for .list-two
  56. $(function() {
  57.  
  58.     $('.custom-select.list-two').click(function() {
  59.         $('.custom-select.list-two ul').slideToggle('fast');
  60.     });
  61.  
  62.     $('.custom-select.list-two ul li').click(function() {
  63.         $(this).addClass('selected');
  64.         $('.custom-select.list-two span')
  65.         .html($('.custom-select.list-two ul li.selected').html());
  66.         $(this).removeClass('selected');
  67.     });
  68.  
  69. });
  70.        
  71. $(function() {
  72.  
  73.     $('.custom-select').click(function() {
  74.         $(this).find('ul').slideToggle('fast');
  75.     });
  76.  
  77.     $('.custom-select ul li').click(function() {
  78.         var $this = $(this);
  79.         $this.closest('div').find('span').html($this.html());
  80.     });
  81.  
  82. });
  83.        
  84. // Function Definition
  85. function doListStuff(listClass) {
  86.  
  87.     $(listClass).click(function() {
  88.         $(listClass + ' ul').slideToggle('fast');
  89.     });
  90.  
  91.     $(listClass +' ul li').click(function() {
  92.         $(this).addClass('selected');
  93.         $(listClass + ' span')
  94.         .html($(listClass + ' ul li.selected').html());
  95.         $(this).removeClass('selected');
  96.     });
  97.  
  98. }
  99.  
  100. //Function for .list-one
  101. $(function() {
  102.     doListStuff('.custom-select.list-one');
  103. });
  104.  
  105. //Function for .list-two
  106. $(function() {
  107.     doListStuff('.custom-select.list-two');
  108. });