解析Div的创建UL/LI列表中删除重复

我在DOM与分隔的条目是这样的div：

<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个div。

来源

2012-02-28 ATLWebDesigner

由于它是纯Java的脚本，它不会采取就算你有2000多时间divs – coolguy 2012-02-28 05:37:28

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

DEMO：http://jsfiddle.net/BWBsj/

来源

2012-02-28 05:32:04 charlietfl

哇，这是最小的代码量来完成正确的结果。 Pefect！这比我在http://jsfiddle.net/jbeacher/9qfpn/8/上的繁琐解决方案要好得多，但这种解决方案没有正确排序。 – ATLWebDesigner 2012-02-28 13:29:52

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

来源

2012-02-28 05:30:08 coolguy

有许多方法...只是整理出了我的脑海里第一次。 – coolguy 2012-02-28 05:38:05

这里是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>"); 
    } 

} 

});

DEMO：http://jsfiddle.net/yycYb/21/

来源

2012-02-28 05:41:05 mini

不唯一或按照OP – charlietfl 2012-02-28 05:55:26

排序这也是一个不错的方法，但没有完成按字母顺序排序数据的次要目标。 – ATLWebDesigner 2012-02-28 13:31:04

解析Div的创建UL/LI列表中删除重复

回答

相关问题