解析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列表中刪除重複

回答

相關問題