Hinzufügen von Klasse zu entsprechen() führt

Question

Ich habe den folgenden Code, der für Text auf einer Seite suchen und die Ergebnisse filtern:

$('#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>

Wie kann ich über das Hinzufügen einer Klasse gehen zu der .searchMe Container, in dem der Text gefunden wurde?

Ich habe versucht mit parent(), aber da die Ergebnisse von match() die Zeichenfolge selbst zurückgeben, und nicht das Element, das es enthält, funktioniert das nicht. Irgendwelche Vorschläge?

Answer 1

Sie könnten stattdessen .filter() verwenden.

$('#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

Versuchen Sie folgendes:

$('#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>