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

AppendTo上一次迭代（每次）

3 个答案: