CODEWITHSUNDEEP
jquerycss
stacky
stacky

Reputation: 311

How to change a css element based on other element

Fiddle gives you the idea

<div class="change" style="width:150px;">xyz</div>
<div class="change" style="width:350px;z-index:999">XYZ</div>

I have two divs of same class in which inline css differs and i want to add one of the element z-index in 1st div as z-index:99, without directly adding it to inline css and cannot add a new class to that div as i dont have any control on them, as both divs i am getting are through jquery and cannot be edited from my end

based on the inline css width of that particular class can i add new inline-css element through jquery or any other better possible solution?

Thanks in advance

Upvotes: 0

Views: 765

Answers (6)

tposs
tposs

Reputation: 53

What about this, you can filter by the width of items with the change class:

```

$( ".change" ).filter(function( index ) {
    return $(this).width() === 150;
}).css( "z-index", 99 );

```

Upvotes: 0

davidelrizzo
davidelrizzo

Reputation: 733

You can target the exact inline property with pure CSS:

.change[style*='width:150px'] { z-index:99; }

Be as specific as you want with the property, if it ever changes this will break. If it matches another element it will apply the style there too.

Upvotes: 0

Jimish Gamit
Jimish Gamit

Reputation: 1024

for first one

jQuery('.change').first().css('z-index',1000);

or

jQuery('.change:first-child').css('z-index',1000);

for last one

jQuery('.change').last().css('z-index',1000);

for n-th child

jQuery( ".change:nth-child(n)").css('z-index',1000);

https://api.jquery.com/category/selectors/child-filter-selectors/

Upvotes: 2

JavidRathod
JavidRathod

Reputation: 483

Please use this : 

$(".change").each(function(){
    if($(this).css("width") == "150px"){
    $(this).css("z-index",99);
  }
});

Upvotes: 0

Nitesh Pawar
Nitesh Pawar

Reputation: 425

its very simple ..add below css in head in <style> </style>

.change:first-child{
  z-index:99;
}

Upvotes: 1

OneRealWinner
OneRealWinner

Reputation: 677

You can with jquery

var w = $('.change:first').width();
$('.change:last').css('width', w + 'px');

Upvotes: 0

Related Questions