javascript - How to simplify my current jQuery Selection. -

i have list item different class name. fiddle

list-html

<ul class="dropdown">          <li class="cfl-1-1"> 0-10%</li>          <li class="cfl-1-2"> 11-20%</li>          <li class="cfl-1-3"> 21-40%</li>          <li class="cfl-1-4"> 31-40%</li>          <li class="cfl-1-5"> 41-10%</li>  </ul> 

each list have different class name because if click of list. specific div goes hide. here divs

div-html

<div id="cfl-1-1">0-10%</div> <div id="cfl-1-2">11-20%</div> <div id="cfl-1-3">21-30%</div> <div id="cfl-1-4">31-40%</div> <div id="cfl-1-5">41-50%</div> 

i gave unique id's example if click on list class="cfl-1-5" , div id="cfl-1-5" go hidden.

here jquery:

$('.cfl-1-1').click(function(){     $("#cfl-1-1").fadeout('slow');   });  $('.cfl-1-2').click(function(){     $("#cfl-1-2").fadeout('slow');   });  $('.cfl-1-3').click(function(){     $("#cfl-1-3").fadeout('slow');   });  $('.cfl-1-4').click(function(){     $("#cfl-1-4").fadeout('slow');   });  $('.cfl-1-5').click(function(){     $("#cfl-1-5").fadeout('slow');   }); 

so question may need more 5 list , more 5 divs here, there way manage ? because see how have done jquery, if there hundred list jquery long :|. possible make loop loop ? check increase if class name (cfl-1-1,cfl-1-2... etc) not jquery yet. appreciated.

try give common class , do,

html,

<ul class="dropdown">    <li class="cfl"> 0-10%</li>    <li class="cfl"> 11-20%</li>    <li class="cfl"> 21-40%</li>    <li class="cfl"> 31-40%</li>    <li class="cfl"> 41-10%</li>  </ul> 

js:

var divs = $('[id^=cfl]');  $('.cfl').click(function(){     divs.eq($(this).index()).fadeout('slow');   }); 

demo