/ / Como faço para acrescentar itens de lista <li> de uma lista não ordenada <ul> entre quatro outras listas não ordenadas com base em seu conteúdo - javascript, jquery

Como faço para adicionar itens de lista <li> de uma lista não ordenada <ul> entre quatro outras listas não ordenadas com base em seu conteúdo - javascript, jquery

Atualmente tenho uma lista de marcas que sãodinamicamente puxados para a página e precisam ser segmentados entre 4 listas com base em seu nome de marca. Por exemplo, uma coluna conterá qualquer coisa que comece com um número. A segunda coluna conterá todas as marcas que começam com as letras A a H. A terceira coluna I-P. A quarta coluna Q-Z. No momento, estou tentando usar a função .map () no jquery para percorrer a lista e puxar itens para fora e acrescentar à respectiva lista, mas estou tendo alguma dificuldade. Qualquer ajuda será muito apreciada!

(nota: não lista de marca atual ... terá cerca de 50 marcas na lista final.)

Aqui está o meu 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>

Respostas:

4 para resposta № 1
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 );

Aqui está o violino: http://jsfiddle.net/q697n/


Se você quiser tornar o código um pouco SECOer, você pode armazenar as expressões regulares em um objeto de mapa:

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 );

Aqui está o violino: http://jsfiddle.net/q697n/1/