为什么循环/分组在jquery中无法正常工作

时间:2018-01-18 08:12:55

标签: javascript jquery

你能不能告诉我为什么循环/分组在jquery中无法正常工作

我拿数据时

var data = ['c', 'd', 'c', 'abc', 'dee', 'pu', 'gu'],

它正常工作 但是当我拿数据时

var data =  ["VADODARA", "AHMEDABAD"],

VADODARA应该进入Q--z这里是我的代码

https://jsbin.com/zowibewema/edit?html,js,output

$(function(){
  var data =  ["VADODARA", "AHMEDABAD"],
    groups = ['A--D', 'E--I', 'J--P', 'Q--Z'],
    groupIndex = 0,
    result = '';

result += '<ul>';
result += '<li>' + groups[groupIndex] + '</li>';
data
    .sort()
    .forEach(function (s) {
        if (s[0].toLowerCase() > groups[groupIndex].slice(-1).toLowerCase()) {
            result += '<li>' + groups[++groupIndex] + '</li>';
        }
        result += '<li>' + s + '</li>';
    });
while (++groupIndex < groups.length) {
    result += '<li>' + groups[groupIndex] + '</li>';
}
result += '</ul>';
document.body.innerHTML += result;
})

预期输出

<ul>
    <li>A--D</li>
    <li>AHMEDABAD</li>
    <li>E--I</li>

    <li>J--P</li>
    <li>Q--Z</li>
    <li>VADODARA</li>
</ul>

2 个答案:

答案 0 :(得分:0)

您需要使用while循环来获取实际值之前的所有组。

while (s[0].toLowerCase() > groups[groupIndex].slice(-1).toLowerCase()) {

var data = ["VADODARA", "AHMEDABAD"],
    groups = ['A--D', 'E--I', 'J--P', 'Q--Z'],
    groupIndex = 0,
    result = '';

result += '<ul>';
result += '<li>' + groups[groupIndex] + '</li>';
data
    .sort()
    .forEach(function(s) {
        while (s[0].toLowerCase() > groups[groupIndex].slice(-1).toLowerCase()) {
            result += '<li>' + groups[++groupIndex] + '</li>';
        }
        result += '<li>' + s + '</li>';
    });
    while (++groupIndex < groups.length) {
        result += '<li>' + groups[groupIndex] + '</li>';
    }
result += '</ul>';
document.body.innerHTML += result;

答案 1 :(得分:0)

由于您仍在对数组进行排序,concat user.messages.push(result._id) 包含datasort所有内容。使用forEach迭代它们,并创建HTML字符串:

&#13;
&#13;
groups
&#13;
$(function() {
  var data = ["VADODARA", "AHMEDABAD"],
    groups = ['A--D', 'E--I', 'J--P', 'Q--Z'],
    combined = data.concat(groups).sort(function(a, b) {
      return a.localeCompare(b);
    }),
    result = '';

  result += '<ul>';
  combined
    .forEach(function(s) {
      result += '<li>' + s + '</li>';
    });
  result += '</ul>';
  document.body.innerHTML += result;
})
&#13;
&#13;
&#13;