AppendTo以前的迭代（每個）

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遍歷數組時，此引用不再引用您的原始上下文，而是引用當前項目。構造項目的標記並連接到在循環外插入的字符串不僅可以解決此問題，而且還可以提供更好的性能，因爲您只需執行一次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); 
});