如果div包含某些内容，请更改父div的CSS

Question

I am having html like this:

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
    <div class="ProizvodInner">
        <p class="KatBr">10-56 L   </p>
        <p class="Naziv">TN 35  SRAF  1000/1 </p>
    </div>
</div>

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
    <div class="ProizvodInner">
        <p class="KatBr">10-88 L   </p>
        <p class="Naziv">TN 70  SRAF  1000/1 </p>
    </div>
</div>

Now I have input element with onclick method that runs function which should do this:

• Check if any HTML part inside div with class Proizvod contains input and if it is then change css of that div with class Proizvod .

So let's say I typed in 88 and it goes

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> /* There is no html part here - skip */
    <div class="ProizvodInner"> /* There is no html part here - skip */
        <p class="KatBr">10-56 L   </p> /* There is html part here - it doesn't contain 88 - skip*/
        <p class="Naziv">TN 35  SRAF  1000/1 </p> /* There is html part here - it doesn't contain 88 - skip*/
    </div>
</div>

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> /* There is no html part here - skip */
    <div class="ProizvodInner"> /* There is no html part here - skip */
        <p class="KatBr">10-88 L   </p> /* There is html part here - it does contain 88 - change this div with class Proizvod display to none */

        <p class="Naziv">TN 70  SRAF  1000/1 </p>
    </div>
</div>

I have tried something like this:

function Filter(element)
{
    $t = $(element).val();
    $("div:contains($t)").css( "display", "none" );
}

But nothing happens nor error appear.

Answer 1

$t is meaningless inside your selector string like that, it's just treated like aa literal string. There's no string interpolation in JS like in languages like PHP which would place its value into the final string.

Try $("div:contains(" + $t + ")") instead.

Also your code currently targets all divs, not just the ones with the class "Proizvod" as mentioned in the question.

Here's a demo which fixes both of the above issues, and also resets the filter each time so that results hidden by the previous filter operation are visible again:

 $(function() { $("#FilterButton").click(function() { $t = $("#Filter").val(); $(".Proizvod").css("display", "block"); //reset previous filter $(".Proizvod:contains(" + $t + ")").css("display", "none"); //apply new filter }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> <div class="ProizvodInner"> <p class="KatBr">10-56 L </p> <p class="Naziv">TN 35 SRAF 1000/1 </p> </div> </div> <div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> <div class="ProizvodInner"> <p class="KatBr">10-88 L </p> <p class="Naziv">TN 70 SRAF 1000/1 </p> </div> </div> <input type="text" id="Filter" /><button type="button" id="FilterButton">Filter</button> 

Answer 2

如果要使该语法起作用，则需要使用模板文字

$(`div:contains(${$t})`).css( "display", "none" );

Answer 3

The problem is with selection of the div

You need to apply $("div:contains(" + $t + ")") for contains check.

Please check below code, I removed some extra code, and apply class border so you can get more idea.

 function Filter() { $("body > div").removeClass('YesProizvod').addClass('Proizvod');//this is for reset all $t = $('#myFilter').val(); $("body > div:contains(" + $t + ")").removeClass('Proizvod').addClass('YesProizvod'); } 

 .Proizvod { border: solid 2px green; margin-bottom: 10px; } .YesProizvod { border: solid 2px red; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="myFilter" value="88" /> <button onclick="Filter()">Click here to filter</button> <br><br> <div class="Proizvod" value="131"> <div class="ProizvodInner"> <p class="KatBr">10-56 L </p> <p class="Naziv">TN 35 SRAF 1000/1 </p> </div> </div> <div class="Proizvod" value="131"> <div class="ProizvodInner"> <p class="KatBr">10-88 L </p> <p class="Naziv">TN 70 SRAF 1000/1 </p> </div> </div> 

I hope it will be helpful.