5

Estou numa situação em que preciso pegar todos os "elementos pai" de uma div, mas não posso pegar todos, porque não iria resolver meu problema. Gostaria de saber se posso colocar um limite na obtenção desses elementos. Com um exemplo fica mais claro. Considerem a estrutura:

<div class="all">
    <div class="1">
        <div class="2">
            <div class="3">
                <div class="4">
                <!-- Conteúdo -->
                </div>
            </div>
        </div>
    </div>
</div>

Nesse caso gostaria de pegar todos os elementos pai da div com a classe 4, com exceção da div de classe all mas também quero todas as que estiverem acima da .all. É possível fazer isso via jquery?

2 Respostas 2

9

Com a função parents() é simples, basta colocar dentro da função not() aqueles elementos que não quer:

var pais = $('.4').parents().not('.all, body, html');
pais.each(function() {
  console.log('classe do pai ' +$(this).prop("tagName")+ ': ' +$(this).prop('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="my-section">
    <div class="0">
        <div class="all">
            <div class="1">
                <div class="2">
                    <div class="3">
                        <div class="4">
                        <!-- Conteúdo -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

4

Já tens uma resposta com jQuery, aqui fica uma com JavaScript nativo. Lembra-te que em HTML as classes não podem começar por números, penso que tenhas dado números só para o exemplo mas deixo o aviso na mesma.

var getParents = (function() {
    function hasClass(el, classes) {
        var elClassList = [].slice.call(el.classList);
        return elClassList.filter(function(_class) {
            return classes.indexOf(_class) != -1;
        }).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 (el == document.body) break;
            if (!hasClass(el, args)) parents.push(el);
        }
        return parents;
    }
})();

console.log(getParents('c4', 'all')); // [div.c3, div.c2, div.c1]
<div class="all">
    <div class="c1">
        <div class="c2">
            <div class="c3">
                <div class="c4">
                    <!-- Conteúdo -->
                </div>
            </div>
        </div>
    </div>
</div>

Fiz este função que recebe como primeiro argumento a classe do elemento onde começa, e depois nos restantes argumentos as outras classes que não queres apanhar. Podes passar N argumentos.

12
  • @Miguel prefiro a minha maneira :) notParent = document.querySelector(notParents[i]); pesa muito no Browser
    – Sergio
    24/06/2016 às 10:53
  • Pois realmente és muito mais javascript pro que eu. Se bem que que acho que a tua tem a desvantagem de os elementos 'not' terem de ser classes document.querySelector('.' + args.shift())
    – Miguel
    24/06/2016 às 10:56
  • Mas agora que penso tu também usas ...document.querySelector(..., será que pesa mais por eu não especificar o tipo de seletor?
    – Miguel
    24/06/2016 às 11:03
  • Uma versão com uma modificação pouco significativa: jsfiddle.net/ks8hu650/1 24/06/2016 às 11:12
  • @Miguel eu uso document.querySelector uma vez para ir buscar o ponto de partida, tu tinhas dentro do while, que pode correr muitas vezes.
    – Sergio
    24/06/2016 às 11:24

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 .