Нужна помощь в превращении цикла for / if в селектор jQuery

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"); 

    }

};

Из соображений производительности я хотел бы заменить цикл for и оператор if селектором jQuery, который отфильтровывает все элементы до тех, к которым нужно применить 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

Это похоже на действительно плохую идею.Но вот jQuery, чтобы сделать примерно то, что вы просили.Это не очень поможет, потому что все равно придется смотреть почти все на странице:

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

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

Answer 2

Вы можете использовать метод $.filter(), чтобы получить то, что вы хотите:

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

Это приведет к тому, что плавающие элементы будут превращены во встроенные элементы.

Демо : http://jsbin.com/utape3/edit

Хотя в документации jQuery указано , при использовании :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.