CODEWITHSUNDEEP
javascriptjquerycss
Bariskonat
Bariskonat

Reputation: 227

Find first parent and add class via jQuery

HTML:

<div class="views-row views-row-10 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text1</span>  
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text2</span>  
  </div>

JS:

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').parent().addClass('hobi')
}

Its work but add hobi class all parent divs. But I want add only text1's parent div. How can I fix it?

Upvotes: 14

Views: 3237

Answers (8)

Alex Char
Alex Char

Reputation: 33218

jquery selector :contains() match any element that contains the string. I suggest to use .filter():

$(".sonuc span").filter(function() {
  return this.innerText === "text1";
}).parents("div.views-row").addClass("active");
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">
  <div class="sonuc">
    <span>text1</span> 
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">
  <div class="sonuc">
    <span>text2</span> 
  </div>
  <div class="views-row views-row-11 views-row-even views-row-last">
    <div class="sonuc">
      <span>text11</span> 
    </div>

Upvotes: 15

Suhaib Janjua
Suhaib Janjua

Reputation: 3572

A much more simple straight forward way without using :contains, .filter() is,

$('.sonuc > span:first').parent().addClass('hobi');

It selects the first direct descendant span under .sonuc class and then by using .parent() selects it parent and adds the class '.hobi' in it.

Working JSFiddle Demo

$('.sonuc > span:first').parent().addClass('hobi');
.hobi {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">
  <div class="sonuc"> <span>text1</span>

  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">
  <div class="sonuc"> <span>text2</span> 
  </div>
</div>

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use the code without if statement, that is completely unnecessary at this context.

$(".sonuc").has("span:contains('text1')").parent().addClass('hobi')

Upvotes: 10

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use :contains selector along with required div selector:

 $('.views-row:contains(text1)').addClass('hobi');

Working Fiddle

Upvotes: 18

Thomas Fellinger
Thomas Fellinger

Reputation: 656

Just combine what you allready got.

$('.sonuc').has(":contains('text1')").parent().addClass('hobi');

maybe its not a good idea to test on text, it might changes...

to get the first element of a set of elements you can:

$('.sonuc').eq(0).parent().addClass('hobi');

or 

$('.sonuc:eq(0)').parent().addClass('hobi');

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15923

Just add first() in your jquery 

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').first().parent().addClass('hobi')
}
.hobi{
color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text1</span>  
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text2</span>  
  </div>

Upvotes: 1

Rhumborl
Rhumborl

Reputation: 16609

You can find the right element in one filter:

$(".sonuc:contains('text1')").parent().addClass('hobi');

Or if you really mean the first parent, then just use :eq():

$(".sonuc:eq(0)").parent().addClass('hobi');

Upvotes: 4

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You are trying to find parent of sonuc but add class to sonuc only

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').addClass('hobi')
}

Upvotes: 1

Related Questions