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
Post a Comment