jQuery：根据条件将类添加到元素

Question

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");
    }
});

Answer 1

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> 

Answer 2

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");
    }
});

Answer 3

I tested this code and it works:

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

Answer 4

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.

Answer 5

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");
}

Answer 6

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");
});