0

Como fazer para percorrer todo o DOM e achar um determinado elemento em jQuery?

Quero, ao clicar na li de classe="home", abrir a div de classe="submenu".

<body class="home">

<!-- Header -->
<div class="wrap-header">
    <div class="row">
        <div class="area-logo-responsive hide-for-large-up small-12 medium-12 columns">
            <a href="index.php/home"><h1><img src="img/theme/logo-responsive.png" title="Openweb " alt="Openweb " /></h1></a>
        </div>
    </div>
    <!-- Row do Menu e do Logo -->
    <div class="row">

        <div class="large-3 columns show-for-large-up">                 
            <div class="area-logo">
                <a href="index.php/home"><h1><img src="img/theme/logo-openweb.png" title="Openweb " alt="Openweb " /></h1></a>
            </div>
        </div>

        <div class="small-12 medium-12 large-9 columns">                 
            <div class="area-menu hide-for-medium-only hide-for-small-only">
                <ul class="menu">
                    <li menu="home" class="home"><a href="#">Home</a></li>
                    <li><a href="#">Produtos e Serviços</a></li>
                    <li><a href="#">Central do Cliente</a></li>
                    <li><a href="#">Sobre a Openweb</a></li>
                    <li class="last"><a href="#">Contato</a></li>
                    <li class="login"><span class="lock"></span><a href="#">Login</a>
                        <div class="wrap-login show-for-large-up">
                            <div class="area-login">
                                <?php include('include-area-login.php'); ?>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="area-menu-response hide-for-large-up">
                <button class="btn-home">Produtos e Serviços</button>
                <button class="btn-more">Menu <span>&#9661;</span></button>
                <div class="clear"></div>                  

                <div class="menu-hided-left">       
                    <ul>
                        <li><a href="#">Hospedagem de Sites</a></li>
                        <li><a href="#">Servidores Linux</a></li>
                        <li><a href="#">Facilitta Mail Marketing</a></li>
                        <li><a href="#">Google Adwords</a></li>                            
                        <li><a href="#">Instalação de Blog</a></li>
                    </ul>
                </div>

                <div class="menu-hided">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li class="btn-submenu" ><a href="javascript:void(0);">Central do Cliente +</a>
                            <ul class="mais-submenu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                                <li><a href="#">item 4</a></li>
                            </ul>
                        </li>
                        <li class="btn-submenu"><a href="javascript:void(0);">Sobre a Openweb +</a>
                            <ul class="mais-submenu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                                <li><a href="#">item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contato</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>                   
            </div>
        </div>
    </div><!-- Fecha Row da Header -->
</div><!-- Fecha Wrap-Header -->

<!-- Wrap-Drop Menu Header -->
<div class="wrap-menu">
    <div class="row">
        <div class="submenu show-for-large-up large-12 columns">
            <ul>
                <li><a href="#">Hospedagem de Sites</a></li>
                <li><a href="#">Servidores Linux</a></li>
                <li><a href="#">Facilitta Mail Marketing</a></li>
                <li><a href="#">Google Adwords</a></li>
                <li><a href="#">Instalação de Blog</a></li>
            </ul>
        </div>
    </div><!-- Fecha Row do Menu-->
</div><!-- Fecha Wrap Menu -->
12
  • Pode dar mais detalhes? Se está usando jQuery, não tem por que percorrer o DOM todo para achar um elemento. O que você está tentando fazer de fato?
    – bfavaretto
    Commented 21/05/2014 às 18:55
  • Tenho uma li com um menu. Quando eu clicar nessa li eu queria que fosse aberto uma div que estivesse em outro lugar do código.
    – dsantoro
    Commented 21/05/2014 às 18:56
  • Não pode usar da seguinte forma $("#id_do_menu").onclick(function () { //open div });? Commented 21/05/2014 às 18:57
  • Ok, mas essa div tem um ID, uma classe, alguma coisa que te permita identificá-la no documento? Porque em jQuery você usa $('seletor-para-achar-sua-div') e pronto (qualquer travessia do DOM que seja necessária o jQuery faz por você).
    – bfavaretto
    Commented 21/05/2014 às 18:58
  • Não dá, o jquery não trabalha assim, a unica coisa q eu sei que da é usar parent() e tal. Mas seria muita mão.
    – dsantoro
    Commented 21/05/2014 às 18:58

2 Respostas 2

3

Com base nesse comentário você tem à sua disposição os métodos de Traversing em particular jQuery.parent() e jQuery.find():

$( '#element' ).click( function() {

    $( this ).parent().find( 'p' );
});

Nesse pseudo-código, a partir do elemento identificado por element navegamos para seu pai imediato (o primeiro) e nele buscamos os parágrafos.

Outras possibilidades seria usar, jQuery.next() ou jQuery.nextAll() que basicamente fazem o mesmo, porém sem a necessidade de ir para trás primeiro o que é mais performático em HTML bem delineados.

No entanto, evite ao máximo navegar pelo DOM, principalmente em HTMLs grandes. se você sabe o seletor que vai ser aberto/fechado, use-o.

2
  • Entendi. Eu so achava que existisse uma forma mais fácil sabe.
    – dsantoro
    Commented 21/05/2014 às 19:08
  • Na minha humilde opinião, percorrer o DOM por si só já não é uma tarefa fácil. O que você pode fazer é ser o mais específico atingindo os nós com o mínimo de Traversing possível. Commented 21/05/2014 às 19:09
3

Para sua necessidade eu faria assim:

<li menu="home" class="home" data-target="submenu"><a href="#">Home</a></li>

Note o atributo data. A partir daí:

$(".home").on("click", function(e) {
    e.preventDefault();

    var elem = "." + $(this).data("target");

    $(elem).show();
}

Esclarecimentos auxiliares

Você pode selecionar diretamente elementos em jQuery.

Através do ID

Para elementos que tenham id="nome-do-id" você pode usar $("#nome-do-id") para selecionar o elemento

Através da classe

Para elementos que tenham class="nome-da-classe" você pode usar $(".nome-da-classe") para selecionar o elemento

Boas práticas

Sempre use cache quando for iterar em elementos. Para selecionar e navegar em um conjunto de DIV com a mesma classe, faça:

var $cache = $(".classe-das-divs");

$cache.each = function() {
    var elem = $(this); // Referência do elemento atual
}

Note que usei $cache ao invés de $($cache). Isso ocorre porque $cache já é um "objeto jQuery".

3
  • Eu sei como funciona jQuery. Mas preciso clicar num elemento e fazer aparecer outro que está a muitos elementos anteriores e tal. Entendeu?
    – dsantoro
    Commented 21/05/2014 às 19:00
  • Ok, editado! Não havia entendido sua dúvida inicialmente. Commented 21/05/2014 às 19:07
  • 1
    Boa edição, concordo que falta no HTML algo relacionando um submenu com seu respectivo menu.
    – bfavaretto
    Commented 21/05/2014 às 19:10

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 .