如何使用jquery包含：選擇器到一個div和匹配時顯示不同的div塊？

Question

我遇到了我正在合併的代碼問題。

參考： http://api.jquery.com/contains-selector/ http://api.jquery.com/children/

問題：我使用jquery包含：選擇以匹配關鍵字（來自變量）到一個特定的DIV（類= 「關鍵詞」）。如果有匹配，則顯示不帶關鍵字DIV文本的另一個DIV（class = display）。

另一個問題是，當變量關鍵字與DIV（class = display）匹配時，它顯示DIV（class = display） - 但它不應該是因爲我想限制它到DIV（class =關鍵字）。

這裏是我的代碼：

<div class="container"> 
<div class="keywords" style="display:none">San Antonio Spurs</div> 
<div class="display" style="display:none">Results one for SAS</div> 
</div> 

<br> 
<div class="container"> 
<div class="keywords" style="display:none">Miami Heat</div> 
<div class="display" style="display:none">Results two for MIA</div> 
</div> 

<br> 
<div class="container"> 
<div class="keywords" style="display:none">Los Angeles Lakers</div> 
<div class="display" style="display:none">Results three for LAL</div> 
</div> 

<br> 
<div class="container"> 
<div class="keywords" style="display:none">Cleveland Cavaliers</div> 
<div class="display" style="display:none">Results two another for CAVS</div> 
</div> 

這裏的腳本 -

var keyword= "Spurs"; 

$('.container').each(function(){ 
    if($(this).is(":contains("+keyword+")")){ 
     $(this).children(".display").css("display", "block"); 
    } 
}); 

我試圖使用。孩子，或改變代碼，但無濟於事。

這裏是我的測試案例 -

1. 關鍵字=馬刺，然後顯示=結果一個用於SAS（正確結果）
2. 關鍵字=克利夫蘭，然後顯示=結果的兩個另一個用於CAVS（正確結果）
3. 關鍵字= SAS，那麼不顯示任何東西（但我的代碼是不正確的）
4. 關鍵字= LAL，則不會顯示任何東西（但我的代碼是不正確的）

與＃3，＃4中的問題，但仍然顯示DIV（類=顯示器）

這裏是我的測試小提琴 - http://jsfiddle.net/m6swkksg/14/

任何幫助就可以了。謝謝。

Answer 1

您需要將搜索範圍限制爲.keywords只

var keyword= "Spurs"; 
$('.container').has('.keywords:contains('+keyword+')').children(".display").show(); 

在你的情況，你正在檢查對關鍵字全.container元素，這將檢查display元素的內容還的內容，這是不你想要什麼。

$('input').change(function() { 
 
    $('.container .display').hide(); 
 
    
 
    var keyword = this.value; 
 
    $('.container').has('.keywords:contains(' + keyword + ')').children(".display").show(); 
 
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <input value="Spurs" /> 
 
</div> 
 
<div class="container"> 
 
    <div class="keywords" style="display:none">San Antonio Spurs</div> 
 
    <div class="display" style="display:none">Results one for SAS</div> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <div class="keywords" style="display:none">Miami Heat</div> 
 
    <div class="display" style="display:none">Results two for MIA</div> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <div class="keywords" style="display:none">Los Angeles Lakers</div> 
 
    <div class="display" style="display:none">Results three for LAL</div> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <div class="keywords" style="display:none">Cleveland Cavaliers</div> 
 
    <div class="display" style="display:none">Results two another for CAVS</div> 
 
</div>

Answer 2

嘗試忽略.display元素，調用.is()超過.container，將搜索在其所有後代的比賽時。

var keyword= "Spurs"; 
 
$('.container > .keywords:contains('+ keyword +')').next('.display').show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="keywords" style="display:none">San Antonio Spurs</div> 
 
<div class="display" style="display:none">Results one for SAS</div> 
 
</div> 
 

 
<br> 
 
<div class="container"> 
 
<div class="keywords" style="display:none">Miami Heat</div> 
 
<div class="display" style="display:none">Results two for MIA</div> 
 
</div> 
 
    
 
<br> 
 
<div class="container"> 
 
<div class="keywords" style="display:none">Los Angeles Lakers</div> 
 
<div class="display" style="display:none">Results three for LAL</div> 
 
</div> 
 
    
 
<br> 
 
<div class="container"> 
 
<div class="keywords" style="display:none">Cleveland Cavaliers</div> 
 
<div class="display" style="display:none">Results two another for CAVS</div> 
 
</div>

如果你是在一個混亂使用內置的演示，只是看看here。