Question

想象一下，我有这样的数组

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

＆＃13;

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

＆＃13;

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

＆＃13;

我用jQuery生成列表

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

示例

＆＃13;

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

＆＃13;

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

＆＃13;

示例

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

＆＃13;

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

＆＃13;

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/

Answer 2

您需要创建一个计数器来建立正确的类，而不是正确的类型：
如果您已经在使用jQuery，那么您可以利用它 HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mylist"></div>
</body>
</html>

的CSS：

.small {
  background:#FFD433;
  height:50px;
}
.large {
  background:#A6445E;
  height:150px;
}

的javascript：

var myarray = ["apple", "apple", "apple", "potato", "apple"], 
  listCreate = function  (data) {
  var output = $('<ul>'),
    listItem = $('<li>'),
    i,
    length = myarray.length - 1,
    counter = [];
  for(i = 0; i <= length; i += 1) {
    counter[data[i]] = counter[data[i]] + 1 | 1; 
    listItem
    .clone()
    .text(data[i])
    .addClass((counter[data[i]] === 1)? 'large': 'small')
    .appendTo(output);
  }
  $('#mylist').append(output);
};
listCreate(myarray);

jsbin.com：
http://jsbin.com/covakuseru/1/edit?html,css,js,output

Answer 3

试试这个：

Fiddle

函数function generate(array, colors)有两个参数array（["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"]）和colors（["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]），两者都应该是数组。

HTML：

<div id="myList"></div>

的JavaScript：

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

＆＃13;

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    console.log(counts);
    console.log(newArray);
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

generate(["potato", "volvo", "volvo", "potato", "apple"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E"]);

＆＃13;

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

＆＃13;

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

3 个答案:

Fiddle

HTML：

的JavaScript：