CODEWITHSUNDEEP
javascriptjqueryhtml
AbrahamDaniel
AbrahamDaniel

Reputation: 569

JQuery : Add class to a element based on a condition

In the below code snippet if a div with strikeWindow class has "display:none" style then the corresponding div with class blockElement should be added a class "strikeWindowAddtocart"

<div class="boxContent" >
    <div class="strikeWindow" style="display:none">
    </div>
    <div class="blockElement">
    </div>    
</div>
<div class="boxContent" >
    <div class="strikeWindow" style="display:block">
    </div>
    <div class="blockElement">
    </div>     
</div>

I tried the following jquery snippet, but it dint work. I would love to have a working JSFiddle example. Thanks. 

$('.strikeWindow').each(function(i, obj) {
    if((obj.style.display).search('block') ==0) {
        $(this).parents('.boxContent').find(".blockElement").addClass("strikeWindowAddtocart");
    }
});

Upvotes: 0

Views: 2007

Answers (6)

The Alpha
The Alpha

Reputation: 146191

You may try something like this:

$('.boxContent>div.strikeWindow:hidden')
.next('.blockElement')
.addClass('strikeWindowAddtocart');
.strikeWindowAddtocart{ background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxContent" >
    <div class="strikeWindow" style="display:none">I'm Hidden</div>
    <div class="blockElement">BlockElement after hidden strikeWindow</div>    
</div>
<div class="boxContent" >
    <div class="strikeWindow" style="display:block">Visible strikeWindow</div>
    <div class="blockElement">BlockElement after visible strikeWindow</div>     
</div>

Upvotes: 2

Nicol&#242;
Nicol&#242;

Reputation: 1875

A working JSFiddle example: http://jsfiddle.net/bbc5rp76/1/embedded/result,html,js,css/

$(".strikeWindow").each(function () {
    var $this = $(this);
    if ($this.css("display") === "none") $this.siblings(".blockElement").addClass("strikeWindowAddtocart");
});

Upvotes: 1

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

You can also do this by using the following code:

var x = $(".strikeWindow").length
for(var i=1; i<=x;i++)
{
    if ($(".strikeWindow:nth-child('+i+')").css("display")=="none")
        $($(".strikeWindow:nth-child('+i+')")).next("blockElement").addClass("strikeWindowAddtocart");
}

Upvotes: 1

M J
M J

Reputation: 81

It can be done as : 

$('.strikeWindow').each(function(i, obj) {
    if($(this).css("display") == "none") {      // you made a mistake here
       $(this).parents('.boxContent').find(".blockElement").addClass("strikeWindowAddtocart");
    }
});

For checking whether an element has a particular style or not .css method of jquery can be used.

Upvotes: 1

Stan Shaw
Stan Shaw

Reputation: 3034

I tested this code and it works:

$('.strikeWindow').each(function() {
    if ($(this).css("display") == "none")
        $(this).next("div").addClass("strikeWindowAddToCart");
});

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You can do it like this:

$('.strikeWindow').each(function (i, obj) {
    alert($(obj).css("display") == "none") {
        $(this).parents('.boxContent').find(".blockElement").not(this).addClass("strikeWindowAddtocart");
    }
});

Upvotes: 1

Related Questions