jqueryのは、リンクテキストは、配列

Question

である場合、私は、配列を持っているだけでリンクするaddClassを適用します。リンクをクリックすると、目標はリンクテキストでの状態は、配列（例えばメイン）である場合のdivを開くことです

<a class="one" href="http://www.maine.gov/aPage.shtml">Maine</a> 
<a class="one" href="https://www.colorado.gov/aPage.aspx">Colorado</a> 

が、リンクテキストでの状態でない場合は、リンクを開くには配列に（例えばコロラド州）

は私だけそのリンクテキスト列に表示されたものに、クラス、.openDivを追加することができません。 .openDivを使用してdivを開きます。

私は、配列内のテキストを持つすべてのリンクを見つけて、openDivを適用するには、各（）を使用して（と思う）反復処理しています。

手動でテストすると両方のリンクが正常に動作しますが、addClassコードはリスト内のすべてのリンクに.openDivを適用しており、配列内のリンクに制限する方法がわかりません。私の.jsスクリプトはページの一番下にあります。

ここで私は

$("a[href]").text() 

と$この様々な形の、ない行くを試したコード

$(document).ready(function() 
{var List2 = ['Idaho', 'District of Columbia', 'Maine', 'Maryland', 'New Jersey', 'Oklahoma']; 

$("a[href]").each(function() { 
if(jQuery.inArray($("a[href]").html(), List2) !== -1) { 
$("a[href]").addClass('openDiv'); 
} 
}); 
$(".openDiv").click(function(e) { 
e.preventDefault(); 
$("#notInList1").slideToggle(200); 
}); 
}); 

です。私は3つまたは4つの他の質問を読んだが、どれも同じではない。 私はこれを修正するために$ thisを使用する方法を知っていますか？クラスを追加するときに、すべてのa[href]要素を選択しているので

Answer 1

問題があります。代わりに、現在の要素にクラスを追加するeach()ハンドラでthisキーワードを使用します。

$(document).ready(function() { 
 
    var List2 = ['Idaho', 'District of Columbia', 'Maine', 'Maryland', 'New Jersey', 'Oklahoma']; 
 

 
    $("a[href]").each(function() { 
 
    if (List2.indexOf($(this).text()) != -1) { 
 
     $(this).addClass('openDiv'); // note 'this' here 
 
    } 
 
    }); 
 
});

.openDiv { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="one" href="http://www.maine.gov/aPage.shtml">Maine</a> 
 
<a class="one" href="https://www.colorado.gov/aPage.aspx">Colorado</a>