Question

有一次我需要使用Prototype而不是jQuery，我不太满意。有人可以帮我转换下面的脚本：

var output={};
$('ul li').each(function(i,v){
    var l=$(this).text().substring(0,1).toUpperCase();
    if(typeof(output[l])=="undefined") output[l]=[];
    output[l].push($(this).text());
});
$('ul').empty();
for(var i in output){
    $('ul').append('<li><p>'+i+'</p></li>');
    for(var j in output[i]){
        $('ul').append('<li>'+output[i][j]+'</li>');
    }
}

完整来源：http://jsfiddle.net/flxfxp/3LwH8/7/

非常感谢！

Answer 1

我的原型有点生锈，但是：

var output = $$('ul li').reduce({}, function(rv, li) {
  var l = li.innerHTML.substring(0, 1).toUpperCase();
  (rv[l] = rv[l] || []).push(li.innerHTML);
  return rv;
});
$$('ul').update($(output).collect(function(list, letter) {
  return '<li><p>' + letter + '</p></li>' + list.collect(function(txt) {
    return '<li>' + txt + '</li>';
  }).join('');
}).join(''));

我唯一担心的是.innerHTML与jQuery中的.text()不同，但我不知道如何在Prototype中执行.text()。 / p>

Answer 2

var output = $H({});

$$("ul li").each(function(el){
  var l = el.innerHTML.substr(0,1).toUpperCase();
  if(typeof(output.get(l))=="undefined") output.set(l, []);
  output.get(l).push(el.innerHTML);
})

$$('ul').invoke("update", '');

output.keys().each(function(key){
  var values = output.get(key);
  $$('ul').first().insert('<li><p>'+key+'</p></li>');
  values.each(function(v){
    $$('ul').first().insert('<li>'+v+'</li>');
  });
});

使用最新的Prototype进行测试

Answer 3

    document.observe("dom:loaded", function () {
        var output = {};
        $$('ul.wikiext-taggedpages li').each(function(v, i) {
            var l = v.innerHTML.substring(0, 1).toUpperCase();
            if (typeof(output[l]) == "undefined") {
                output[l] = [];
            }
            output[l].push(v.innerHTML);
        });

        console.log('output', output);

        $$('ul.wikiext-taggedpages')[0].update('');
        for (var i in output) {
            if (output.hasOwnProperty(i)) {
                $$('ul.wikiext-taggedpages')[0].insert('<li><p>' + i + '</p></li>');
                for (var j in output[i]) {
                    if (output[i].hasOwnProperty(j)) {
                        $$('ul.wikiext-taggedpages')[0].insert('<li>' + output[i][j] + '</li>');
                    }
                }
            }
        }
    });

从jQuery到Prototype的端口小功能？

3 个答案: