CODEWITHSUNDEEP
javascriptjquery
Marian Ioan
Marian Ioan

Reputation: 317

Jquery - if condition true, loop through selector and do something

I'm trying to get this piece of code to work:

HTML:

<div class="content-block blog-post clearfix zoomIn animated" style="position: absolute; left: 0px; top: 0px;">
<div class="content-block blog-post clearfix zoomIn animated" style="position: absolute; left: 451px; top: 0px;">
<div class="content-block blog-post clearfix zoomIn animated" style="position: absolute; left: 0px; top: 466px;">
<div class="content-block blog-post clearfix zoomIn animated" style="position: absolute; left: 451px; top: 476px;">

Jquery:

var a = $(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").css("position") == "absolute" && $(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").css("left") == "0px";
var b = true;
var c = a && b;

    $(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").each(function(i, obj) {
    if(c){
        $(this).addClass("left");
    } else {
        $(this).addClass("right");
    }
});

What I'm trying to do is: if .blog-post has position:absolute;left:0, add the class .left else .right.

Below is the html output of the current javascript:

<div class="content-block blog-post clearfix zoomIn animated left" style="position: absolute; left: 0px; top: 0px;">
<div class="content-block blog-post clearfix zoomIn animated left" style="position: absolute; left: 451px; top: 0px;">

Thanks!

Upvotes: 0

Views: 313

Answers (3)

Sani Huttunen
Sani Huttunen

Reputation: 24385

Still not exactly sure what you're trying to accomplish but this might be a nudge in the right direction (if you want just the divs with position: absolute and left: 0px to get the right class):

$(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").each(function(i, obj) {
  var a = $(this).css("position") === "absolute" && $(this).css("left") === "0px";
  var b = true;
  var c = a && b;

  if(c) {
    $(this).addClass("right");
  } else {
    $(this).addClass("left");
  }
});

Which can be simpliefied to:

$(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").each(function(i, obj) {
  if($(this).css("position") === "absolute" && $(this).css("left") === "0px") {
    $(this).addClass("right");
  } else {
    $(this).addClass("left");
  }
});

Update

After your edit you state that you just want .blog-post which have position: absolute and left: 0px to have the left class added to them.

Then something like this should be more sufficient:

$(".blog-post").each(function(i, obj) {
  if($(this).css("position") === "absolute" && $(this).css("left") === "0px") {
    $(this).addClass("left");
  } else {
    $(this).addClass("right");
  }
});

Upvotes: 0

firefoxuser_1
firefoxuser_1

Reputation: 1839

Adding two true/false doesn't give you true or false, it gives you a number:

True + true = 2
True + false = 1
False + false = 0

Also, you will need to move the first line inside the each():

    $(".category-susans-personal-blog .archive_page .wpb_thumbnails .blog-post").each(function(i, obj) {
var $a = $(this).css("position") == "absolute" && $(this).css("left") == "0px";
    if($a){
        $(this).addClass("right");
        } else {
        $(this).addClass("left");
    }
    });

Demo

Upvotes: 0

user229044
user229044

Reputation: 239382

You cannot "add" booleans together this way:

$c = $a + $b;

All you're doing is coercing both to integers. Since $b is always true, you're going to be doing either $c = 0 + 1 or $c = 1 + 1, but either way the result is that $c will be a truthy value.

You need to use boolean logic operators such as && or ||. If you want to say "both a AND b must be true", you need &&:

$c = $a && $b;

Upvotes: 2

Related Questions