If a Div Contains a Specific String of Text, Edit the Parent'S CSS

If a div contains a specific string of text, edit the parent's css

use :contains selector in Jquery .

$(".container .heading a:contains('Very important text')").each(function(i , v){
    $(this).closest(".heading").css("height" , "200px");
    $(this).closest(".container").css("background-color" , "green");
});

or simply

$(".container .heading a:contains('Very important text')")
        .closest(".heading").css("height" , "200px")
        .closest(".container").css("background-color" , "green");

Fiddle

If div contains something change css of parent div

$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>

If a div contains a specific string of text, change background-color

The first issue is with your selector. It's very specific and targeting elements that don't exist. The second issue is your call to closest, which is looking for a parent with a class of "ng-cell" instead of an attribute. This seems to work:

$(".ngCellText span:contains('Assigned')").each(function(i , v){    $(this).closest("[ng-cell]").css("background-color" , "green");});

.ng1582937649646 .colt8 {    width: 140px;}.ng1582937649646 .col8 {    width: 140px;    left: 1175px;    height: 40px;}.ngCellText, .ngCenteredCellText {    padding: 0 5px 0 10px;    line-height: 40px;    font-size: 14px;    font-family: OpenSansLight,OpenSans,Helvetica;    text-transform: none;}.ngCellText, .ngCenteredCellText, .ngHeaderText {    padding-left: 10px;    line-height: 35px;    font-size: 14px;}.ngCellText {    padding: 5px;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;    white-space: nowrap;    -ms-text-overflow: ellipsis;    -o-text-overflow: ellipsis;    text-overflow: ellipsis;    overflow: hidden;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;"> <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;"> </div> <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div></div>
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;"> <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;"> </div> <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">In Progress</span></div></div></div>
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;"> <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;"> </div> <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div></div>

How to change the CSS class of a parent element if the child contains certain string chain

I have not worked with jquery for a while and I don't know how the $("a:contains(First)") works but the snippet below works as you described

$( document ).ready(function() {
    $("a").each(function () {
      if ($(this).text().indexOf("First") !== -1) {
        console.log($(this).text());  
        $(this).closest("li").addClass("hidden");
      }
      
    }) 
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">First Newsletter Title</a>, 11 December 2020</li>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Second Newsletter Title</a>, 12 December 2020</li>
  <li><a href="http://example.createsend.com/t/ViewEmailArchive/t/">Third Newsletter Title</a>, 13 December 2020</li>
</ul>

Change a div's background when the span inside that div contains specific text using jquery

Because your selector is grabbing more than a single element , when you are using .each() inside it's scope you can use this to refer to the current element that's being iterated:

$('.price > span').each(function(){
  if($(this).text()==="Free"){
    $(this).parent(".price").css('background-color', 'green');
  }
});

Updated Fiddle

How to find direct parent with specific text using jquery?

This will give your the direct parent.

$('div>:contains("$")').last().css("background-color","yellow")

JSFIDDLE DEMO

EDIT: The above will work great for only one occurrence of $. For multiple occurrences of text, use below code. This makes use .each() and looks for a closing </div> tag each time.

var divs = $('div>:contains("$")');
divs.each(function() {
    var htmlinner = $(this).html();
    if(htmlinner.indexOf('</div>') == -1) {
        $(this).css("background-color", "yellow");
    }
});

JSFIDDLE DEMO[2] for multiple occurrences

Javascript targeting the parent div from a string of text

Somehow like this (you will not see anything, because <div class="myDiv"> is hidden already):

var spans = document.getElementsByClassName('mySpan')
for(var i = 0; i < spans.length; i++) {  if(spans[i].innerHTML === 'SAMPLE TEXT A') spans[i].parentElement.style.display = 'none';}

<div class="myDiv">    <span class="mySpan">SAMPLE TEXT A</span>    <span class="mySpan">SAMPLE TEXT B</span></div>

jquery if element contains text, add class to parent div

IDs must be unique, so use class to identify parent. You can use .closest() to identify parent with class post-item.

HTML

<div class="post-item">   
  <span class="tags">
      <a href="#">Blogs</a>  
    <h3>Lorem</h3>          
  </span>         
</div>

<div class="post-item">   
  <span class="tags">
      <a href="#">Sponsored by Lorem Ipsum</a>            
  </span>       
    <h3>Lorem</h3>
</div>

JavaScript

jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz');

DEMO

:has() Selector can also be used

Selects elements which contain at least one element that matches the specified selector.

jQuery('.post-item:has(a:contains("Sponsored"))').addClass('sponz');

jsFiddle

If a Div Contains a Specific String of Text, Edit the Parent'S CSS