[英]Jquery - if condition true, loop through selector and do something
I'm trying to get this piece of code to work: 我正在尝试使这段代码起作用:
HTML: 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: 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
. 我想做的是:如果
.blog-post
具有position:absolute;left:0
,则添加类.left
else .right
。
Below is the html output of the current javascript: 以下是当前javascript的html输出:
<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! 谢谢!
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. 由于
$b
始终为 true,因此您将要执行$c = 0 + 1
或$c = 1 + 1
,但是无论哪种方式,结果都是$c
将是真实值。
You need to use boolean logic operators such as &&
or ||
您需要使用布尔逻辑运算符,例如
&&
或||
. 。 If you want to say "both a AND b must be true", you need
&&
: 如果要说“ a和b都必须为真”,则需要
&&
:
$c = $a && $b;
Adding two true/false doesn't give you true or false, it gives you a number: 加上两个true / false不会给您带来true或false的问题,而是会给您一个数字:
True + true = 2
True + false = 1
False + false = 0
Also, you will need to move the first line inside the each(): 同样,您将需要在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");
}
});
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): 仍不能完全确定您要完成什么,但这可能是朝着正确的方向推(如果您只需要具有
position: absolute
和left: 0px
的div来获得right
类):
$(".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. 编辑后,您声明只希望
.blog-post
具有position: absolute
和left: 0px
添加left
类。
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");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.