3

Digamos que tenho:

 <section id="ele-section1">
    <div data-section="1">
        <div class="not_this">
            <div>
                <div class="ele2">
                    <div id="ele3">
                        <div class="ele4">
                            <div class="child">
                                <!-- Conteúdo -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Quero 'agarrar' todos os elementos que sejam pais de .ele4 exceto .not_this (também quero os acima deste).

Sei que com a ajuda de jQuery podia fazer-se assim:

$('.ele4').parents().not('.not_this, body, html');

Mas gostava de fazer esta funcionalidade somente em js nativo. Como fazer?

2

1 Resposta 1

3

Podes usar o Element.matches que verifica se um elemento tem um certo seletor CSS, ou melhor se seria selecionado com um dado seletor CSS. Caso seja para usar em browsers antigos há um polyfill nesse link em cima para fazer uso da lógica do .matches.

Assim a funcão poderia ser assim:

var getParents = (function() {
    function match(el, classes) {
        return classes.filter(function(css) {
            return el.matches(css);
        }).length != 0;
    }

    return function(from, not /*, not2, etc...*/ ) {
        var args = [].slice.call(arguments);
        var el = document.querySelector(args.shift());
        var parents = [];
        while (el = el.parentElement) {
            if (!match(el, args)) parents.push(el);
        }
        return parents;
    }
})();

console.log(getParents('.ele4', '.not_this', '#teste', 'body', 'html')); 
// dá [div#ele3, div.ele2, div, div, section#ele-section1]

E nessa seleção ficam de fora elemento(s) com classe not_this e também a id teste, para além do body e do html

jsFiddle: https://jsfiddle.net/4n4od3a8/

2
  • 1
    Excelente @Sergio Obrigado. Não conhecia. Testei também para não ir buscar '[data-section="1"]' e funciona bem
    – Miguel
    Commented 24/06/2016 às 12:51
  • Não ligues a isto, é só para pôr esta pergunta nos fav e ter aqui uma solução adaptada com o teu codigo como alternativa. jsfiddle.net/ks8hu650/11
    – Miguel
    Commented 24/06/2016 às 14:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .