Browsing entire DOM with jQuery

Navigation
0

How do I go through the entire DOM and find a particular element in jQuery?

I want, by clicking on li of classe="home" , open div of 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 -->
    
asked by anonymous 21.05.2014 / 20:54

2 answers

3

Based on in this comment you have at your disposal the methods of Traversing in particular jQuery. parent () and jQuery.find () : 

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

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

In this pseudo-code, from the element identified by element we navigate to its immediate parent (the first) and look for the paragraphs in it.

Other possibilities would be to use jQuery.next () or jQuery.nextAll () that basically do the same, however without the need to go back first what is more performative in HTML well delineated.

However, avoid browsing the DOM, especially in large HTMLs. if you know the selector that is going to be opened / closed, use it.

    
21.05.2014 / 21:06
3

For your need I would do so: 

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

Note the data attribute. From here: 

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

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

    $(elem).show();
}

Auxiliary clarifications

You can directly select elements in jQuery.

Through ID

For elements that have id="nome-do-id" you can use $("#nome-do-id") to select the element

Through class

For elements that have class="nome-da-classe" you can use $(".nome-da-classe") to select the element

Good practices

Always use caching when iterates through elements. To select and navigate a set of DIV with the same class, do: 

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

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

Note that I used $cache instead of $($cache) . This is because $cache is already a "jQuery object".

    
21.05.2014 / 20:58
Put value in everything that is null in mysql css menu separated by bar