Browse the entire DOM with jQuery

Asked

Viewed 2,098 times

0

How to go through the whole DOM and find a certain element in jQuery?

Yes, by clicking on li of classe="home", open the 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 -->
jquery html dom

  • Can you give more details? If you’re using jQuery, you don’t have to go through the whole DOM to find an element. What are you really trying to do?

  • I have a read with a menu. When I click on this read I wanted to open a div that was somewhere else in the code.

  • Can’t use it like this $("#id_do_menu").onclick(function () { //open div });?

  • Okay, but does this div have an ID, a class, anything that allows you to identify it in the document? Because in jQuery you use $('seletor-para-achar-sua-div') and ready (any DOM crossing that is necessary jQuery does for you).

  • I can’t, jquery doesn’t work like this, the only thing I know is to use Parent() and such. But it would be very handy.

  • Look, if you want to cross the DOM, don’t use jQuery, use firstChild and nextSibling that’s enough. But I’m sure there is a very simple way to get what you want using jQuery, just explain in detail (please [Edit]and the question with these details, your HTML, which div wants, etc). Otherwise your question can be closed because it is very vague.

  • I’d paste the code but I don’t know how to make it cute.

  • Use the button {} editor. And don’t use tabs, only spaces.

  • I pasted the code. I know you can use Parent(), next() and such but it would be an ugly and extensive code.

  • For me the question is still confused... but why not $('.home').click(function(){ $('.submenu').show(); })?

  • Home is many levels "inside" the wrap-menu. I would have to return to the "wrap-menu", give find and find the element q I want.

  • Igorem. It worked out this simple way lol.

Show 7 more comments

2 answers

3

For your need I would do so:

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

Note the attribute data. From there on:

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

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

    $(elem).show();
}

Auxiliary clarifications

You can directly select elements in jQuery.

Through the 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 practice

Always use cache when iterating on elements. To select and navigate on 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".

  • I know how it works jQuery. But I need to click on one element and make another one appear which is many previous elements and such. Got?

  • Ok, edited! I had not understood your doubt initially.

  • 1

    Good editing, I agree that HTML lacks something relating a submenu to its respective menu.

3

Based in that 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 that pseudo-code, from the element identified by element we navigate to your immediate father (the first) and in it we seek the paragraphs.

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

However, avoid navigating the DOM as much as possible, especially in large Htmls. If you know which selector will be opened/closed, use it.

  • I get it. I just thought there was an easier way you know.

  • In my humble opinion, going through the DOM alone is no longer an easy task. What you can do is be the most specific reaching the nodes with the minimum of Traversing possible.

Browser other questions tagged jquery html dom

You are not signed in. Login or sign up in order to post.