Question

我有以下代码：

var $elements = $("body").find("*");

for (var i = 0, len = $elements.length; i < len; i++) {
    var $e = $elements.eq(i), 
        cssFloat = $e.css("float"), 
        cssDisplay = $e.css("display");

    if (cssDisplay !== "none" && 
       (cssFloat === "left" || cssFloat === "right")) { 

        $e.css("display", "inline"); 

    }

};

出于性能原因，我想用jQuery选择器替换for循环和if语句，该选择器将所有元素过滤掉只需要应用display: inline;的元素。

我正在考虑以下伪代码：

$("body")

.find("*")
.not(selector for elements whose css display style is not "none")
.contains(selector for elements whose css float style is "left" or "right")    
.css("display", "inline");

无论出于何种原因，我的大脑都让我失望了。这可能吗？

Answer 1

您可以使用$.filter()方法获得所需内容：

$(":visible").filter(function(index){
    return ( $.inArray( $(this).css('float'), ['left','right'] ) > -1 ); 
  }).css({display:'inline'});

这会导致浮动元素变为内联元素。

演示：http://jsbin.com/utape3/edit

虽然jQuery文档states使用:visible会出现性能问题，但它比使用*或body *更有效。

效果比较：http://jsperf.com/splat-vs-pseudo

我不确定用JavaScript做更快的方法。您会在性能测试中注意到我使用了包括自定义选择器在内的所有内容：

$.expr[':'].floated = function(obj) {
    return ($.inArray($(obj).css('float'), ['left', 'right']) > -1);
};

$(":floated").css({display:'inline'});

我真的只对该方法的结果感兴趣，而不是完全熟悉内部如何处理这种类型的选择器。

原始JavaScript - 更快

我已经在性能测试中添加了以下内容：

var els = document.getElementsByTagName('*');
for (var i = 0; i < els.length; i++) {
  cssTxt = els[i].style.cssText;
  if ((cssTxt.indexOf('float: left') > -1) || (cssTxt.indexOf('float: right') > -1)) {
    els[i].style.display = 'inline';
  }
}

此测试假定：

<p style="float:left">Foo</p>
<p style="float:right">Bar</p>

与以前的jQuery方法相比，它被抛到一起，但速度非常快。

Answer 2

这似乎是一个非常糟糕的主意。但这里是jQuery大致按你的要求做的。它不会有太多帮助，因为它仍然需要查看页面上的所有内容：

$(":visible").filter(function(){
    var cssFloat = $(this).css("float");

    return cssFloat === "left" || cssFloat === "right";
}).css("display", "inline");

需要帮助将for loop / if语句转换为jQuery选择器

2 个答案: