Locate the immediate parent element and assign a class to it using jQuery

Question

Locate the immediate parent element and assign a class to it using jQuery

CSS:

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

JavaScript:

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

The code works, but it adds the hobi class to all parent divs. I want to add it only to the parent div of text1. How can I fix this?

javascript jquery css

Answer 1

Answer №1

To apply a specific class to a div containing certain text, you can utilize the :contains selector in conjunction with the appropriate div selector:

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

Check out the live demo here!

Answer 2

To apply a specific class to a div containing certain text, you can utilize the :contains selector in conjunction with the appropriate div selector:

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

Check out the live demo here!

Answer 3

Answer №2

When using the jquery selector :contains(), it will match any element that contains the specified string. However, I recommend utilizing the .filter() method instead:

$(".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>

Answer 4

When using the jquery selector :contains(), it will match any element that contains the specified string. However, I recommend utilizing the .filter() method instead:

$(".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>

Answer 5

Answer №3

Consider avoiding the if statement in this case as it is not needed.

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

Answer 6

Consider avoiding the if statement in this case as it is not needed.

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

Answer 7

Answer №4

In order to locate the specific element with ease, you can utilize a single filter:

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

Alternatively, if you specifically want to target the first parent element, you can directly employ the :eq() selector:

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

Answer 8

In order to locate the specific element with ease, you can utilize a single filter:

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

Alternatively, if you specifically want to target the first parent element, you can directly employ the :eq() selector:

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

Answer 9

Answer №5

Your goal is to locate the parent element of sonuc, but you are only adding a class to sonuc.

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

Answer 10

Your goal is to locate the parent element of sonuc, but you are only adding a class to sonuc.

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

Answer 11

Answer №6

Simply include the first() function in your jQuery code snippet:

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>

Answer 12

Simply include the first() function in your jQuery code snippet:

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>

Answer 13

Answer №7

Simply merge your current resources.

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

It's probably not a wise idea to rely on testing text as it may change...

To select the first element from a group of elements, you can:

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

or

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

Answer 14

Simply merge your current resources.

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

It's probably not a wise idea to rely on testing text as it may change...

To select the first element from a group of elements, you can:

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

or

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

Answer 15

Answer №8

An alternative, more straightforward method that does not involve the use of :contains or .filter() is as follows:

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

This code snippet targets the first direct descendant span within the .sonuc class. It then uses .parent() to select its parent and adds the class '.hobi' to it.

See the 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>

Answer 16

An alternative, more straightforward method that does not involve the use of :contains or .filter() is as follows:

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

This code snippet targets the first direct descendant span within the .sonuc class. It then uses .parent() to select its parent and adds the class '.hobi' to it.

See the 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>

Locate the immediate parent element and assign a class to it using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Is there a way to programmatically update a webpage using Javascript?

Using Firebase callable functions with React Native

Serving static files with Express JS while using Angular's $locationProvider.html5Mode (express.static)

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

The validation process is still failing even though the correct credentials have been entered

Transferring the bundle files of one Next.js app to another Next.js app

Using Fabric JS to create a group of multiple objects

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Automatically Switch Font Colors to Red and Green

Ways to restrict a function to a single DOM element using either its id or class

Reveal a segment of a picture

Safari: The onbeforeunload event

Enhance your jQuery cycle experience with additional scrollHorz effects embedded within every slide

Is it possible to alter the page color using radio buttons and Vue.js?

Looking to personalize the appearance of an iframe using CSS styling?

Tips for interpreting information from a JSON array that has been stringified, looping through the data, and utilizing it effectively

Changing from using GET to employing POST

Navigating errors during the distribution of numerous messages with SendGrid and Node.js

Performing an AJAX PUT call to a C# server-side controller

Trouble with Express.js and Mongoose: Issue with find() method not returning results for specified variable