동적으로 생성 된 요소의 수를 카운트

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>에 클래스를 추가 한 다음 해당 클래스의 개수를 계산할 수 있습니다.