Question

考虑以下代码：

if ( $('.sidebar-primary, .sidebar-secondary').css('float') === 'left' ) {

即使HTML中甚至不存在.sidebar-secondary，它也会给我一个真实的信息。为什么会这样，即使.sidebar-secondary有时不存在，我该怎么做呢？

Answer 1

“获取匹配元素集中第一个元素的样式属性的值，或为每个匹配的元素设置一个或多个CSS属性。”（http://api.jquery.com/css/）..

你应该尝试：

if (
   $('.sidebar-primary').css('float') === 'left' && 
   $('.sidebar-secondary').css('float') === 'left' ){
   // Your code here...
}

Answer 2

正如jQuery documentation所说：

[。css（）]获取匹配元素集中第一个元素的样式属性的值，或为每个匹配的元素设置一个或多个CSS属性。

因此只考虑数组的第一个元素。你需要这样的东西：

var every = Function.call.bind(Array.prototype.every);

var isFloatLeft = every($('.sidebar-primary, .sidebar-secondary'), function(node) {
    return $(node).css('float') === 'left'
});

console(isFloatLeft);

不幸的是，jQuery没有任何every方法，幸运的是JavaScript（ES5规范）：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/every

请注意，如果您需要检查多个元素，这是一种通用方法。只有两个你可以直接比较它们：

isFloatLeft = $('.sidebar-primary').css('float') === 'float' && 
              $('.sidebar-secondary').css('float') === 'float;

Answer 3

它将与第一个选择器匹配，因此如果您有.sidebar-primary，则只评估此选择器要解决这个问题，你必须逐一进行比较。

查看以下demo以了解会发生什么。

Answer 4

将您的条件陈述分成几部分：

if ($('.sidebar-primary').css('float') === 'left' && $('.sidebar-secondary').css('float') === 'left')) {
   //Do your stuff!
}

或者，如果您要检查的元素列表很多：

function CheckFloat() {
    $('.sidebar-primary, .sidebar-secondary').each(function(i, e) {
      if (e.css('float') != 'left') {
          return false;
      }
    });

    return true;
}

检查是否存在两个选择器元素并且在jQuery中具有相同的值

4 个答案: