jQuery: скрытый эквивалент селектора в Javascript?

Question

У меня есть этот код;

$('.m-shop-top-product .b-item:hidden').slice(0, 10).show();

Я хочу преобразовать его в чистый Javascript, я не могу найти эквивалентный код Javascript, который возвращает мне все скрытые элементы! Я пробовал вот так;

Array.from(document.querySelectorAll('.m-shop-top-product .b-item:hidden')).slice(0,10)

но выдает ошибку как;

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.m-shop-top-product .b-item:hidden' is not a valid selector.

Answer 1

Ну, в соответствии с jQuery docs , скрытый селектор делает следующее:

• У них значение CSS для отображения отсутствует.
• Это элементы формы с type = "hidden".
• Их ширина и высота явно установлены на 0.
• Элемент-предок скрыт, поэтому элемент не отображается на странице.

Итак, высделать document.querySelectorAll (". m-shop-top-product .b-item"), а затем применить фильтр (e), чтобы проверить стиль "css" для отображения, сформировать скрытый атрибут, ширину, высоту и пройти по элементу.parentElement, пока вы не прочитаете documentElement, чтобы увидеть, является ли родитель скрытым или нет.

function isHidden(){ /* TODO: Implement */ return false;}

document.querySelectorAll(".m-shop-top-product .b-item").filter(function(e){
   return isHidden(e);
});

например

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) 
{
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

или

function isVisible (ele) 
{
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

или

function isVisible(el)
{
    // returns true iff el and all its ancestors are visible
    return el.style.display !== 'none' && el.style.visibility !== 'hidden'
    && (el.parentElement? isVisible(el.parentElement): true)
}

или

function isHidden(el) 
{
    if(!el)
        return false;

    do 
    {
        if(!(el instanceof Element))
            continue;

        var style = window.getComputedStyle(el);

        if (style.width == "0" || style.height == "0" || style.opacity == "0" || style.display == "none" || style.visibility == "hidden")
        {
            return true;
        }


        // console.log(el);
    } while ((el = el.parentNode));

    return false;
}