Test if children contain specific text with jQuery

Question

I have to filter a html-table. To do so I created an each callback for all tr elements and test if one of the tr-children contain some specific pattern.

$("#filter").keypress(function() {
    var filter = $(this).val();

    $("#table1 tr[data-config]").each(function(){

        var val = $(this).find(":contains('" + filter + "')");

        if(val.length > 0){
            $(this).css("display","table-row");
        }else{
            $(this).css("display","none");
        }
    });
});

It works, but is there an function to test if a element contains some text?

At the moment I retrieve a list of all elements containing the pattern and count if it's bigger than zero. Is there a jQuery function, which tests if this pattern occurs and returns a boolean? The table can contain many rows and therefore I want as little overhead as possible.

Answer 1

///// replace these lines...
// var val = $(this).find(":contains('" + filter + "')");
// if(val.length > 0){

///// with this line
if($(this).text().match(filter)){

This works by converting the whole row content into a text string, then using simple string comparison function to check if filter is contained inside the text (and therefore the row)

Answer 2

The answers are good, but there's an easier way using :contains

In general, do this:

$(".class:contains('texttofind')").css("display", "none");

With the specific example above, do this:

$("#table1 tr[data-config]:contains('" + filter + "')").css("display","table-row");

You can find out more here: https://api.jquery.com/contains-selector/

This avoids having to loop with .each or .find.