jQueryのLIの内容を確認する - 内容に基づいて特定のクラスを追加 - jQueryの$（この）

Question

のトラブル私はjQueryの初心者だけど、私はCMSのフロントエンドのスタイルを必要とHTMLを変更することはオプションではありません、jQueryの救助に！ LI内のテキストに応じて、LIにクラスを追加します。

私はjQueryのの$（この）オブジェクトを使用してヘルプのビットを使用することができます。

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) { 
    $('div.nav ul li:nth-child(2)').addClass("about"); 
} 

しかし、指数関数的に私のコードを繰り返さないために、私はむしろこのような何かを記述します：たとえば、次のコードは動作します

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) { 
    $(this).addClass("about"); 
} 

しかしこれは動作しません。私は何かひどく明白なものを屠っていると確信していますが、私は$（this）オブジェクトについていくつかのチュートリアルを読んできました。

また、おそらく私はずっと簡単な解決法がありません。私は次のマークアップを持っているとしましょう。

<ul id="nav"> 
<li>About</li> 
<li>Contact</li> 
<li>News</li> 
</ul> 

今度は、私は単にn番目の子だけを使用していない各LIにクラス/アイコンを割り当てることはできませんので、このナビゲーションは、将来的に変更される可能性がありますと仮定してみましょう。各LIをループして各条件をループする方法はありますか？私はjQueryを使って十分に慣れていないんだけど、英語とjQueryの私のミックスの中でそれは次のようになります。

loop through #nav:each li { 
    if (child:contains("About")').length > 0) { 
     $(this).addClass("about"); 
    } 
    if (child:contains("Contact")').length > 0) { 
     $(this).addClass("contact"); 
    } 
    if (child:contains("News")').length > 0) { 
     $(this).addClass("news"); 
    } 
} 

残念ながらそれはちょうど作っ構文れます！本当に誰かがREAL jQueryでそれを書くのを手助けすることができます:)もしそうなら、おそらくあなたが持つかもしれないCSSの問題を手伝ってくれるでしょう。

ありがとうございます！

Answer 1

li要素をループする必要はありません。投稿したサンプルマークアップを使用して、About liエレメントにクラスを追加する方法は次のとおりです。

$('#nav li:contains(About)').addClass('about') 

他の2つの項目については、2回以上リンスして繰り返します。

$('#nav li:contains(Contact)').addClass('contact') 
$('#nav li:contains(News)').addClass('news') 

Answer 2

最初のコードスニペットthisは、期待したDOM要素を指していませんが、ほとんどの場合そのコードを実行したインスタンスが動作しないためです。

あなたは$.eachループを使用し、各探し、クラスを適用することができます。この場合、$(this)の使用を見ることができます。

$('#nav > li').each(function(){ 

    if ($(this).filter(':contains("About")').length > 0) { 
     $(this).addClass("about"); 
    } 
    else if ($(this).filter(':contains("Contact")').length > 0) { 
     $(this).addClass("contact"); 
    } 
    else if ($(this).filter(':contains("News")').length > 0) { 
     $(this).addClass("news"); 
    } 
}); 

Answer 3

$（this）は関数のみで動作します。関数が呼び出される要素への参照です。 if文は関数ではないため、if文は適用されません。代わりに、あなたはそうのように、変数のキャッシングを行うことができます。

var $aboutItem = $('div.nav ul li:nth-child(2):contains("About")'); 
if($aboutItem.length > 0) { 
    $aboutItem.addClass("about"); 
} 

Answer 4

jQueryの各（）関数を使用して、コレクションを反復処理することができます。 $（this）オブジェクトは反復の現在の要素を参照します。クラスが常にコンテンツと一致すると仮定すると、このコードは機能します。それ以外の場合は、クラスのswitch文を作成できます。

$("ul#nav li").each(function(){ 
    var txt = $(this).text(); 
    $(this).addClass(txt.toLowerCase()); 
});