複数のエントリの場合のjQueryの文字数

Question

ここにはhtml構造があります。ページ上で数回繰り返します。

<article class="boo"> 
    <h4>Here goes the title</h4> 
</arcticle> 

記事内の各ヘッダーh4の文字数をカウントしたいと思います。

$('article.boo h4').text().length > 70 

すべてのヘッダーの合計文字数をカウントします。私が望むのは、各ヘッダーが70文字より長いかどうかを確認することです。

この場合、すべての要素をループして検証する最良の方法は何ですか？

はありがとう

Answer 1

あなたはすなわちjQueryのeach()方法、使用することができます：

$('article.boo h4').each(function() { 
    if ($(this).text().length > 70) { 
     //do stuff if longer than 70 chars 
    } 
}); 

をまたは、あなたの「best」の定義に応じて、標準のJavaScript forループを使用することができます：

for (var x = 0, y = $('article.boo h4').length - 1; x < y; x++) } 
    if ($('article.boo h4')[x].text().length > 70) { 
     //do stuff if longer than 70 chars 
    } 
} 

ので、セレクタのキャッシングを向上させることができることが必要であればが最良の手段で「最も簡単」のあなたの定義最高で、あなたが意味する場合は、最初のオプションは、「最もパフォーマンス」移動するための方法かもしれは、第二を使用している場合各ループ上の要素を選択しないように次のような試す簡単なJavaScriptを使用したい場合は、反復

Answer 2

あなたはjQueryオブジェクトの要素を反復処理するためのjQuery eachメソッドを使用することができます

：

$("article.boo h4").each(function() { 
    console.log($(this).text().length); 
}); 

Answer 3

var h4s = document.getElementsByTagName("H4"); 
i = 0; 
while (h4s[i]) { 
//validate here 
} 

またはあなたが使用することができますjquery each

Answer 4

$("article.boo h4").each(function (index, domEle) { 
      if($(domEle).text().length>70) 
{ 
       this.style.color = "blue"; 
      } else { 
       this.style.color = ""; 
      } 
     });