javascript - How do I append list items <li> from an Unordered list <ul> between four other Unordered lists based upon their content -


i have list of brand names dynamically pulled page , need segmented between 4 lists based upon brand name. example 1 column hold begins number. second column hold brands begin letters thru h. third column i-p. fourth column q-z. trying use .map() function in jquery traverse list , pull items out , append respective list having difficulty. appreciated!

(note: not actual brand list... have 50 brands in final list.)

here html:

<div class="brand-directory-body">   <ul class="brand-directory-list" style="display:none;">      <li class="brand">37 signals</li>      <li class="brand">apple</li>      <li class="brand">bmg</li>      <li class="brand">cartoon network</li>      <li class="brand">disney</li>      <li class="brand">enews</li>      <li class="brand">nike</li>      <li class="brand">adidas</li>      <li class="brand">frito</li>      <li class="brand">coke</li>      <li class="brand">adobe</li>      <li class="brand">hostess</li>      <li class="brand">dominoes pizza</li>      <li class="brand">honest co</li>      <li class="brand">z brand</li> </ul> <div class="brand-directory-column">      <h3 class="column-title">#</h3>      <ul class="brand-directory-list-num"></ul> </div> <div class="brand-directory-column">      <h3 class="column-title">a-h</h3>      <ul class="brand-directory-list-ah"></ul> </div> <div class="brand-directory-column">      <h3 class="column-title">i-p</h3>      <ul class="brand-directory-list-ip"></ul> </div> <div class="brand-directory-column">      <h3 class="column-title">q-z</h3>      <ul class="brand-directory-list-qz"></ul> </div> 

var lists = {     numbers: [],     ah: [],     ip: [],     qz: [] };  $('.brand').each(function () {     var letter = $.text(this).substr(0, 1);      if ( /\d/.test(letter) ) {         lists.numbers.push(this);     }     else if ( /[a-h]/i.test(letter) ) {         lists.ah.push(this);     }     else if ( /[i-p]/i.test(letter) ) {         lists.ip.push(this);     }     else if ( /[q-z]/i.test(letter) ) {         lists.qz.push(this);     } });  $('.brand-directory-list-num').append( lists.numbers ); $('.brand-directory-list-ah').append( lists.ah ); $('.brand-directory-list-ip').append( lists.ip ); $('.brand-directory-list-qz').append( lists.qz ); 

here's fiddle: http://jsfiddle.net/q697n/


if want make code little dryer, can store regular expressions in map object:

var lists = {     numbers: [],     ah: [],     ip: [],     qz: [] };  var map = {     numbers: /\d/,     ah: /[a-h]/i,     ip: /[i-p]/i,     qz: /[q-z]/i }  $('.brand').each(function () {      var el = this, letter = $.text(this).substr(0, 1);      $.each(map, function (key, regex) {         if ( regex.test(letter) ) {             lists[key].push(el);             return false;         }     }); });  $('.brand-directory-list-num').append( lists.numbers ); $('.brand-directory-list-ah').append( lists.ah ); $('.brand-directory-list-ip').append( lists.ip ); $('.brand-directory-list-qz').append( lists.qz ); 

here's fiddle: http://jsfiddle.net/q697n/1/


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -