Jqueryを使用してリストの正確なテキストを確認するには？

Question

私はリストaを持っている：

<div class='label'> 
    <a>Menu</a> 
    <a>Menu Food</a> 
    <a>Menu Drink</a> 
    <a>Cheese</a> 
</div> 
<div class="mytext"> 
    this text need hide. 
</div> 

は、どのように私は上記のリストaを確認することができますが、正確なテキスト= "メニュー" を持っています。

私はこのスクリプトを使用するが、それは動作しません：

$('.label a').filter(function(){ 
    if($.trim($(this).text()) == "Menu"){ 
     $('.mytext').show(); 
    } 
    else { 
    $('.mytext').hide(); 
    } 
}); 

私もfor loopを使用することはできませんし、内部の状態を使用します。

ありがとうございました。

Answer 1

Updated fiddle。

あなたはリターンを使用して、一致したすべてのアンカーのための操作を適用することができます：あなたは（私の例ではmenu_exist）フラグを使用することができMenuテキスト付きアンカーがありますだけであればdivを表示したい場合に

return $.trim($(this).text()) == "Menu"; 

条件が表示されたらtrue：

var menu_exist=false; 
$('.mytext').hide(); 

$('.label a').filter(function(){ 
    if($.trim($(this).text())=="Menu"){ 
    menu_exist=true; 
    } 
}); 

if(menu_exist){ 
    $('.mytext').show(); 
} 

これが役に立ちます。

var menu_exist=false; 
 
$('.mytext').hide(); 
 

 
$('.label a').filter(function(){ 
 
    if($.trim($(this).text())=="Menu"){ 
 
    menu_exist=true; 
 
    } 
 
}); 
 

 
if(menu_exist){ 
 
    $('.mytext').show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='label'> 
 
    <a>Menu</a> 
 
    <a>Menu Food</a> 
 
    <a>Menu Drink</a> 
 
    <a>Cheese</a> 
 
</div> 
 
<br> 
 
<div class="mytext"> 
 
    this text need hide. 
 
</div>

Answer 2

使用$.trim($(this).text()) != "Menu"Menuではないすべての要素を選択し、それらにhide()を使用します。

$('.label a').filter(function(){ 
 
    return $.trim($(this).text()) != "Menu"; 
 
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='label'> 
 
    <a>Menu</a> 
 
    <a>Menu Food</a> 
 
    <a>Menu Drink</a> 
 
    <a>Cheese</a> 
 
</div>

Answer 3

私は:-)少しいじっと.filter() function

を用いるこの方法の第2の形態は 関数ではなくセレクタに対して要素をフィルタリングするために、私たちを可能にします。各要素について、関数 がtrue（または真実の値）を返す場合、要素はフィルタリングされたセット に含まれます。そうでない場合、それは

var list = $('.label a').filter(function() { 
 
    return $.trim($(this).text()) === "Menu" 
 
}); 
 

 

 
console.log(list.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='label'> 
 
    <a>Menu</a> 
 
    <a>Menu Food</a> 
 
    <a>Menu Drink</a> 
 
    <a>Cheese</a> 
 
    <a>Menu</a> 
 
</div>