How to catch div’s son with contains

Question

In that case I want to test the div with class name, but after testing I want the CSS changes to be made in div with class teste.

<div class="teste">
  <div class="name">um nome</div>
  <div class="outradiv">outra coisa</div>
</div>

  $(".text").on('keyup', function (e) 
  {
    $(".teste:contains('"+$(".text").val().toLowerCase()+"')").css("display", "block");
    $(":not(.teste:contains('"+$(".text").val().toLowerCase()+"'))").css("display", "none");
  });

Answer 1

I think these selectors will scramble the thing. You can make it simpler by checking if the element text contains the string you want.

Example:

$(".text").on('keyup', function(e) {
  var texto = this.value.toLowerCase();
  $(".teste").each(function() {
    var contem = $(this).text().indexOf(texto) > -1;
    $(this).find(".name").css("display", contem ? "block" : "none");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text">
<div class="teste">
  <div class="name">um nome</div>
  <div class="outradiv">uma coisa</div>
</div>

<div class="teste">
  <div class="name">outro nome</div>
  <div class="outradiv">outra coisa</div>
</div>

To hide .teste when you type anything that’s on .name or .outradiv:

$(".text").on('keyup', function(e) {
  var texto = this.value.toLowerCase();
  $(".teste").each(function() {
    var contem = $(this).text().indexOf(texto) > -1;
    $(this).css("display", contem ? "block" : "none");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text">
<div class="teste">
  <div class="name">um nome</div>
  <div class="outradiv">uma coisa</div>
</div>

<div class="teste">
  <div class="name">outro nome</div>
  <div class="outradiv">outra coisa</div>
</div>