javascript - 附加到上一个迭代（每个）

Question

我有以下代码，应该将此字符串拆分@266@@271@@295@为

<a href="#">266</a>
<a href="#">271</a>
<a href="#">295</a>

并将其附加到它来自的同一容器中：.groups

$('.groups').each(function(){
    var str = $(this).html();
    if (str.substring(0, 1) == '@') {
        str = str.substring(1); // Remove first @
    }    

    if(str.substring(str.length-1,  str.length) == '@'){
        str = str.substring(0, str.length-1); // Remove last @
    }

    str = str.split(/[@@]+/);

    $(this).empty(); // empty the groups container

    $.each(str, function(index, val){
        alert(val);
        var html = '<a href="#">' + val + '</a>'
        $(html).appendTo(this);
    });
});

我的问题（我认为）是$(html).appendTo(this);
我需要以某种方式将其添加到上一行each()。

我怎样才能做到这一点。还是我使用此代码朝错误的方向发展？

Answer 1

我认为您使这种方式太复杂了，只需执行以下操作：

var str = $(this).html();
var parts = str.split("@");

var html = "";
for (var i = 0; i < parts.length; i++) {
    html += '<a href="#">' + parts[i] + '</a>';
}

$(this).append(html);

Answer 2

像这样的东西？

$('.groups').each(function(){
    var str = $(this).html();
    if (str.substring(0, 1) == '@') {
        str = str.substring(1); // Remove first @
    }    

    if(str.substring(str.length-1,  str.length) == '@'){
        str = str.substring(0, str.length-1); // Remove last @
    }

    str = str.split(/[@@]+/);

    $(this).empty(); // empty the groups container

    var target = $(this);

    $.each(str, function(index, val){
        alert(val);
        var html = '<a href="#">' + val + '</a>'
        $(html).appendTo(target);
    });
});

我添加了var target = $(this)您的第二个循环外部作为您可以在第二个循环内使用的参考。

Answer 3

您确实需要注意前导和尾随@，但您可以在使用聪明的正则表达式拆分时轻松修剪它们。当您使用 $.each 遍历数组时，this引用不再引用您的原始上下文，而是引用当前项。构造项目的标记并连接到您在循环之外插入的字符串不仅可以解决这个问题，而且还可以提供更好的性能，因为您只会进行一次 DOM 插入。

$('.groups').each(function(){
    var str = $(this).html();
    str = str.replace(/^@+|@+$/g, ''); // trim leading and trailing @
    var links = str.split("@");

    var markup = '';
    $.each(links, function(){
        markup += '<a href="#">' + this + "</a>\n";
    });

    $(markup).appendTo(this);
});