带有CSS媒体查询的jQuery if语句

我正在尝试使用媒体查询来禁用特定浏览器宽度的浮动。仅当我重新加载当前大小的页面时，此if语句才起作用。当CSS属性更改时，是否可以让jQuery应用更改

if($('.two-column li').css('float') == 'left') {
    $('.two-column li').equalHeights();
}

我可能应该在第二个$（'.two column li'）上使用$（this）或其他东西，但我不知道为什么它不起作用。我对jQuery了解不多

编辑：

默认情况下，两列li的样式类似于

.two-column li {
    float: left;
}

然后让我们说

@media only screen and (max-width: 767px) {
    .two-column li {
        float: none;
    }
}

这确实有效。当宽度低于767px时，它停止浮动。我上面的丑陋jquery似乎部分有效。默认情况下，equalheights插件运行，但当宽度低于767px时，插件不运行。我的问题是，它是否运行取决于加载页面时浏览器的大小。我试图让它像媒体查询一样动态响应设计

我称之为“文件准备就绪”

在更多的研究和下面的评论的帮助下，它现在是这样的，包括docready。。。但仍然无法在调整大小时执行此操作，需要刷新

$(document).ready(function () {
    $('.two-column li').filter(function(index) {
        return $(this).css('float') != 'none'
    }).equalHeights();
});

---

现代化提供。此外，您还可以将事件处理程序附加到

$（window）.resize（）

您粘贴的示例代码有点不对劲，它不会达到您期望的效果。您需要做的是选择所有要操作的图元，然后根据其浮动样式的值对其进行过滤。然后，在过滤后，将要执行的操作应用于过滤集。例如，如果您想在浮动设置为“左”的所有“.two column li”元素集上运行equalHeights插件，请尝试以下代码：

$('.two-column li').filter(function(index) {
    if($(this).css('float') == 'left') return true;
}).equalHeights();

---

话虽如此，但问题的根源似乎在于调整浏览器大小时CSS媒体查询未正确激活。您可以发布媒体查询代码以查看是否有更简单的解决方案吗？

您可以使用

$（窗口）。resize（）

确保

div

获取带有

float

的类，因此将其添加到resize函数之外

调整窗口大小时，根据窗口大小打开或关闭类（即浮动或无浮动）。在这种情况下，当窗口大于500px时会发生切换。相反，当该类较小时，该类将被删除

将宽度设置为您喜欢的宽度

---

调整窗口大小以查看它是否正常工作。

好的。。因此，经过更多的研究和一些摆弄，我似乎有了我想要的功能。但是我不能编写正确的jQuery代码，有人能告诉我我做错了什么，使它更优雅吗

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});

---

你什么时候打这个电话？它是否在window.onresize事件处理程序中？请提供更多上下文。您是否可以发布用于根据浏览器宽度切换样式的代码？有一种方法可以通过调整浏览器的大小来让浏览器尊重它，因此这可能是修复它的最简单方法。目前尚不清楚媒体查询与您的代码之间的关系以及jQuery在您的示例中的作用。此处定义了媒体查询：

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});