CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pacijent
Pacijent

Reputation: 149

If div contains something change css of parent div

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:

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.

Upvotes: 0

Views: 1314

Answers (3)

saAction
saAction

Reputation: 2065

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.

Upvotes: -1

ADyson
ADyson

Reputation: 61849

$t is meaningless inside your selector string like that, it's just treated like a a 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>

Upvotes: 1

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You need to use Template Literals if you want to make that syntax work

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

Upvotes: 1

Related Questions