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

Question

考虑这段代码：

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

它给了我一个真实的即使.sidebar-secondary在 HTML 中甚至不存在。为什么会这样？即使 .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 文档所说：

[.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只有这个选择器将被评估。
要解决这个问题，您必须一一比较。

看看下面的演示，看看会发生什么。

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