添加類匹配（）導致

Question

我有以下的代碼，將文本搜索頁面上，並篩選結果：

$('#searchbox').on('input', function() { 
 
    var searchWord = $('#searchbox').val().toUpperCase(); 
 
    $('.searchParent').each(function() { 
 
    var par = $(this); 
 
    if ($(this).find('.searchMe').text().toUpperCase().match(searchWord) || searchWord == '') { 
 
     $(par).fadeIn(); 
 
    } else { 
 
     $(par).fadeOut(); 
 
    } 
 
    }); 
 
});

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

 
<input type="text" id="searchbox"> 
 

 
<div class="searchParent"> 
 
    <span class="searchMe">A</span> 
 
    <span class="searchMe">1</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">B</span> 
 
    <span class="searchMe">2</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">C</span> 
 
    <span class="searchMe">3</span> 
 
</div>

我該如何去增加一個類找到該文本的.searchMe容器？

我試過使用parent()，但由於match()的結果返回字符串本身，而不是包含它的元素，這是行不通的。有什麼建議麼？

Answer 1

您可以改用.filter()。

$('#searchbox').on('input', function() { 
 
    var searchWord = $('#searchbox').val().toUpperCase(); 
 
    $('.searchParent').each(function() { 
 
    var par = $(this); 
 
    $(this).find('.searchMe').removeClass('found').filter(function(){ 
 
     return searchWord != '' && $(this).text().toUpperCase().match(searchWord); 
 
    }).addClass('found'); 
 
    }); 
 
});

.found{color: green;}

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

 
<input type="text" id="searchbox"> 
 

 
<div class="searchParent"> 
 
    <span class="searchMe">A</span> 
 
    <span class="searchMe">1</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">B</span> 
 
    <span class="searchMe">2</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">C</span> 
 
    <span class="searchMe">3</span> 
 
</div>

Answer 2

試試這個：

$('#searchbox').on('input', function() { 
 
    var searchWord = $('#searchbox').val().toUpperCase(); 
 
    $('.searchParent').each(function() { 
 
    var par = $(this); 
 
    if ($(this).find('.searchMe').text().toUpperCase().match(searchWord) || searchWord == '') { 
 
     $(par).fadeIn(); 
 
     $(this).find('.searchMe').addClass('found'); 
 
     if(searchWord == '') { 
 
     $(this).find('.searchMe').removeClass('found'); 
 
     } 
 
    } else { 
 
     $(par).fadeOut(); 
 
     console.log(2) 
 
    } 
 
    }); 
 
});

.found{ 
 
    color:red 
 
}

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

 
<input type="text" id="searchbox"> 
 

 
<div class="searchParent"> 
 
    <span class="searchMe">A</span> 
 
    <span class="searchMe">1</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">B</span> 
 
    <span class="searchMe">2</span> 
 
</div> 
 
<div class="searchParent"> 
 
    <span class="searchMe">2</span> 
 
    <span class="searchMe">3</span> 
 
</div>