Разбор Divs для создания списка UL / LI Удаление дубликатов - PullRequest
Новая
       21

Разбор Divs для создания списка UL / LI Удаление дубликатов

1 голос
/ 28 февраля 2012

Нужен совет JQuery ...

У меня в DOM DIVs с разделенными записями, как это: 

<div class="my-data">collie; german shepherd;</div>
<div class="my-data">collie; cocker spaniel; pug; poodle;</div>
<div class="my-data">poodle; german shepherd;</div>

Мне нужно преобразовать это в алфавитный список с удаленными дубликатами: 

<ul id="new-list">
<li>cocker spaniel</li>
<li>collie</li>
<li>german shepherd</li>
<li>poodle</li>
<li>pug</li>
</ul>

Попытка определить самый быстрый метод jQuery для достижения этой цели; При загрузке страницы у меня будет около 500 делений на страницу.

Ответы [ 3 ]

1 голос
/ 28 февраля 2012 
var $myData = $('.my-data').detach(), list = [], listHtml = ['<ul><li>'];

$myData.each(function(i, el) {
    var txt = $(el).text().split(';');
    $.each(txt, function(idx, val) {
        var val = $.trim(val);
        if (val && val != '' && $.inArray(val, list) == -1) {
         list.push(val);
        }
    });
});

list.sort();
listHtml.push(list.join('</li><li>'));
listHtml.push('</li></ul>');

$('body').append(listHtml.join(''));

ДЕМО: http://jsfiddle.net/BWBsj/

0 голосов
/ 28 февраля 2012

вот код JavaScript 

var dataArray = [];

$("body").append("<ul id='new-list'></ul>");

var newList = $("#new-list");

$(".my-data").each(function(){
var tempArray = $(this).text().split(";");

for(var temp in tempArray){

    var item = tempArray[temp];

    if( item !='' && $.inArray(item, dataArray) == -1) {
        dataArray.push(item);
        newList.append("<li>"+item +"</li>");
    }

}

});

ДЕМО: http://jsfiddle.net/yycYb/21/

0 голосов
/ 28 февраля 2012 
<html> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
 var sorting = [];

 var divs = $('.my-data');
    $.each(divs,function(){ 
    var instr = $(this).html().split(';');
     for(i=0;i<instr.length;i++){
     if(instr[i] !=""){
      sorting.push(instr[i]);
      }
      };

    });

    sorting.sort();

    var str = '<ul id="new-list">';
     for(i=0;i<sorting.length;i++){
     if((sorting[i] != sorting[i+1]) && sorting[i+1] !="undefined"){
       str += '<li>'+sorting[i]+'</li>';
       }
    };
    str += '</ul>';
$('#container').html(str);
});
</script>

</head> 
<body>  

  <div class="my-data">collie; german shepherd;</div>
<div class="my-data">collie; cocker spaniel; pug; poodle;</div>
<div class="my-data">poodle; german shepherd;</div>
<div id="container" ></div>


</body>

</html>
...