jQuery: самый быстрый способ определить, виден ли хотя бы один дочерний элемент в контейнере

JSPerf всех методов на этой странице

• Все видимые элементы: http://jsperf.com/jquery-quickest-visible-check/ 3
• Все элементы скрыты: http://jsperf.com/jquery-quickest-visible-check/2
  Предлагаемый вариант с использованием .each() и .is(':visible') является самым медленным методом. Мой/метод qwertymk оказывается быстрее, чем решение OP, в случае, если все элементы видны. Однако, когда все элементы скрыты, исходный метод кажется оптимальным.

Отредактировано: Причина того, что мой первоначальный метод работает быстрее, заключается в том, что он использовал .find('>' + selector), где нужно использовать .children() (который перебирает все дочерние элементы и проверяет, соответствует ли элемент селектору).

Поскольку div — это нативно поддерживаемый селектор, а тестовый пример не содержит глубоко вложенных элементов, мое решение оказалось быстрым. Но после его нормализации он выглядит почти таким же, как решение qwertymks. JSPerf этих двух решений покажет, что его решение немного быстрее, потому что оно имеет на один вызов функции меньше.

Решения на этой странице являются общими: приведенный ниже код можно оптимизировать для конкретных случаев (например, тот факт, что селектор — это просто тег): http://jsfiddle.net/kFZJs/

Чтобы ускорить процесс, разделите селектор, потому что :visible не является родным селектором CSS.

Предпочтительное решение должно использовать как можно меньше jQuery, потому что желаемое решение должно быть производительным. Для этого изучите логику :visible.

Исходная функция содержит jQuery.support.reliableHiddenOffsets. Это можно безопасно убрать в пользу производительности, когда ваши дочерние элементы не являются ячейками таблицы (что используется только в IE8-).

Теперь напишите плагин jQuery (это не дорого):

 (function($) {
     $.fn.hasAtLeastOneVisibleChild = function(selector) {
         var $col = this.children(selector), i, elem;
         for (i=0; i<$col.length; i++) {
             var elem = $col[i];
             if (elem.offsetWidth !== 0 || elem.offsetHeight !== 0) {
                 return true;
             }
         }
         return false;
     };
 })(jQuery);
 // Usage:
 $this.hasAtLeastOneVisibleChild('div'); // True or false

Один из способов — перебирать дочерние элементы с помощью each(). Но это будет так же медленно, как и ваш код, если видимый элемент будет последним :)

Другой вариант — проверить высоту контейнера.

if($('#container').height() > 0) { ... }

Если дочерние элементы занимают пространство (высоту), то контейнер также будет иметь высоту > 0.

Сделай сам:

var $container = $('#container'), $children = $container.children(), found = false;

for (var i = 0; i < $container.length; i++) {
    var elem = $children[i];
    if (!( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none")){
        found = true;
        break;
    }
}

источник

Попробуйте это. Используйте каждый для итерации и возврата false при совпадении, что может уменьшить итерацию.

isAtleastVisible = false;
$this.children('div').each(function (){
    if($(this).is(':visible') == true)
    {
       isAtleastVisible = true;
       return false;  //This will break each loop at the first visible div
    }
});

if(isAtleastVisible)
   alert("atleast one is visible");
else
   alert("None is visible");

Это повысит производительность и зависит от первого вхождения видимого div. Если это первая одна из сотен, потребуется только одна итерация, а если сотая из ста, то потребуется сто итераций, и никакого прироста производительности не будет.

Как объяснил @Rob W в ответе о работе is('visible'), который показывает, что функция проверяет видимость по этим параметрам.

1. Ширина и высота равны нулю
2. style.display нет

Вы можете использовать один из них для повышения производительности, предположим, что элементы скрыты, установив display = none. Это условие может заменить метод jQuery .is(':visible') == true оператором javascript .style.display == 'block'

    isAtleastVisible = false;
    $this.children('div').each(function (){
        if(this.style.display == 'block')
        {
           isAtleastVisible = true;
           return false;  //This will break each loop at the first visible div
        }
    });