.find() Relationship With Loops, Each() And This Keyword - .find() Returning 4 When It Should Only Be 2

I need to check if a

exists inside an
• that has the class .sub-menu and if it does, add a class to the anchor tag inside the tag above the .sub-menu

Solution 1:

You using jQuery so you can use each method to achieve what you looking for. See snippet in below:

$(function(e) {
  var getMenuItems = $(".item");
  getMenuItems.each(function( index ) {
  	if ($(this).find("ul.sub-menu").length > 0) {
      console.log("sub-menu found")
    }
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul><liclass="item"><ahref="#"></a><ulclass="sub-menu"><li></li></ul></li><liclass="item"><ahref="#"></a></li><liclass="item"><ahref="#"></a><ulclass="sub-menu"><li></li></ul></li><liclass="item"><ahref="#"></a></li></ul>

Solution 2:

A few issues:

• In the callback passed to $(), this is the document DOM object. On the other hand .find is a jQuery method -- not a DOM method -- so that explains the error in the first attempt. Note that in general you should use $(this) in jQuery callbacks (there are exceptions), which then allow you to call methods like .find.

• The comparison with zero is not the right way to test if find returns a match. find returns a jQuery object which is array-like, so you should really do this:

  if ($(this).find("ul.sub-menu").length !== 0)
  

• Although $(this) now returns a jQuery object, it is the same object in each iteration of the for loop, and so you get 4 outputs, and in each case the tested .length value is in fact 2. You actually want this to refer to the elements in getMenuItems. For that use the callback passed to getMenuItems.each. In there this will refer to an "item" element. So then the above if condition will become correct:

  getMenuItems.each(function () {
      if ($(this).find("ul.sub-menu").length !== 0) {
          console.log("sub-menu found");
      }
  }); 
  

But I would suggest to not use find at all, but a smarter selector:

$(function() {
    $(".item > ul.sub-menu").each(function () {
       console.log("sub-menu found");
    });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul><liclass="item"><ahref="#">A</a><ulclass="sub-menu"><li>Sub A.1</li></ul></li><liclass="item"><ahref="#">B</a></li><liclass="item"><ahref="#">C</a><ulclass="sub-menu"><li>Sub C.1</li></ul></li><liclass="item"><ahref="#">D</a></li></ul>