javascript - 合并重复列表项并相应地更改 css

Question

假设我有这样的数组

myarray = ["apple","apple","apple","potato","apple",];

myarray = ["apple","apple","apple","potato","apple",];
           
             function listCreate (data) {
					  var output='<ul>';
					  $.each(data,function(key,val){
					
					  	output+='<li">';
					  	output+='<h4 >'+ val +'</h4>';
					  	output+='</li>';
					  	
					  });
					  output+='</ul>';
					  $('#mylist').html(output);
				}
			listCreate(myarray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mylist">
		    </div>

我用 jQuery 生成列表

我需要合并 n 个重复值并更改 li 高度 n*50px

示例

myarray = ["apple","apple","apple","potato","apple",];

<ul>

<li style="background:#A6445E; height:150px;";>apple</li>
<li style="background:#FFD433; height:50px;">potato</li>
<li style="background:#A6445E; height:50px;">apple</li>

</ul>

示例

myarray =["potato","volvo","volvo","potato","apple",];

<ul>

    <li style="background:#A7777E; height:50px;";>potato</li>
    <li style="background:#FFD433; height:100px;">volvo</li>
    <li style="background:#A4565E; height:50px;">potato</li>
    <li style="background:#A2125E; height:50px;">apple</li>

</ul>

Answer 1

只需使用原始数组创建一个新数组，但忽略紧随其后的重复项:

myarray = ["apple", "apple", "apple", "potato", "apple", "apple"];

var temp = myarray[0];
var fixedMyArray = [temp]; 
var myArrayCounter = [];
var counter = 1;
for (var i = 1; i < myarray.length; i++) {
    if (temp != myarray[i]) {
        temp = myarray[i];
        fixedMyArray.push(temp);
        myArrayCounter.push(counter);
        counter = 1;
    }
    else
    {
        counter++;
    }
}
myArrayCounter.push(counter);

function listCreate(data,dataCounter) {
    var output = '<ul>';
    var temp = 50;
    for(var i = 0; i < data.length; i++)
    {

        output += '<li style="background:#A7777E; height:' + temp*dataCounter[i] + 'px;">';
        output += '<h4 >' + data[i] + '</h4>';
        output += '</li>';

    }
    output += '</ul>';
    $('#mylist').html(output);



}
listCreate(fixedMyArray,myArrayCounter);

然后在您的函数中使用 fixedMyArray 和 myArrayCounter 而不是 myarray。

listCreate(fixedMyArray,myArrayCounter);

这是 JSFiddle:http://jsfiddle.net/jpdjbcjt/1/