計算動態創建元素的數量

Question

我已經使用下面的代碼動態地包裝字符與跨度。

$("span.count").children().andSelf().contents().each(function(){ 
    if (this.nodeType == 3) { 
     var $this = $(this); 
     $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>")); 
    } 
}); 

我想（一旦完成）計算包裝元素的數量，以便我可以將基於數量的類附加到它們的容器。我試過各種方法（認爲我的問題是試圖計算動態創建的內容），但似乎沒有任何工作。以下是我到目前爲止：

var n = $("span.count").live().children().length; 
if (n < 3) { 
    $(".counter").addClass("four"); 
} 

任何幫助將不勝感激。

Answer 1

你不能用你想要做的方式使用.live()。它現在已被棄用，僅用於委託事件處理，而不用於DOM更改。如果你添加一個類，你要添加的跨度，那麼你可以簡單地算了算吧：

$("span.count").children().andSelf().contents().each(function(){ 
    if (this.nodeType == 3) { 
     var $this = $(this); 
     $this.replaceWith($this.text().replace(/(\w)/g, "<span class="letter">$&</span>")); 
    } 
}); 

var cnt = $(".letter").length; 

或者，你可以使用自定義的替換功能，並增加在每次更換計數器：

var spanCnt = 0; 
$("span.count").children().andSelf().contents().each(function(){ 
    if (this.nodeType == 3) { 
     var $this = $(this); 
     $this.replaceWith($this.text().replace(/(\w)/g, function(match) { 
      ++spanCnt; 
      return("<span>" + match + "</span>"); 
     })); 
    } 
}); 

Answer 2

您可以向您插入的<span>添加一個班級，然後統計該班級中有多少人。