CODEWITHSUNDEEP
javascriptjqueryhtmleach
Nathan Kamenar
Nathan Kamenar

Reputation: 894

Looping through elements with jQuery

I am trying to loop through some navigation HTML because I need to modify some items dynamically. Specifically how would I loop through each item with class Droppable and get the jQuery object for certain children. I have posted my code below with a bunch of asterisks(*) denoting notes of the things I need to manipulate as jquery objects.

<nav id="sitenav">
    <ul class="container ul-reset">
        <li class="droppable "> ****** foreach of these
            <a class="RootNode" id="Help" href="javascript:;">HELP</a> ****** I need this
            <div class="mega-menu">
                <div class="container cf">
                    <div style="display: inline-block;">
                        <ul class="ul-reset"> ****** and I need this 
                            <a class="heading disabled" id="Help_Help" href="javascript:;">
                                <h3>Help</h3>
                            </a>
                            <a id="ContactUs" href="/ContactUs/">Contact Us</a>
                            <a id="UserGuides" href="/Help/">User Guides</a>
                        </ul>
                    </div>                                
                </div>
            </div>
        </li>

        {more lis with the same structure...}

    </ul>
</nav>

I tried the below but I get an error that this doesn't have a find method, which I thought it would because I thought this would be the current jQuery wrapped DOM element from the each loop.

$("li.droppable").each(function (index) {
    var header = this.find("a.RootNode");
    var col = this.find("ul.ul-reset");
});

Upvotes: 1

Views: 46

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

.find() is a jQuery method and you can't call it on DOM object this.

You could instead call the .find() method on jQuery object $(this), so it should be :

$("li.droppable").each(function(index) {
  var $this  = $(this);

  var header = $this.find("a.RootNode");
  var col    = $this.find("ul.ul-reset");
});

Upvotes: 4

Related Questions