Question

html structure:

<div class="row">
   <div class="span"></div>
   <div class="span"></div>
   <div class="navMenu">
       <ul>
           <li><a href=#">Link 1</a></li>
           <li><a href=#">Link 1</a></li>
       </ul>
    </div>
</div>

Then I am adding a “new” div just after the above html:

   <div class="row">
      <div class="span"></div>
      <div class="span"></div>
      <div class="navMenu">
        <ul>
           <li><a href=#">Link 1</a></li>
           <li><a href=#">Link 1</a></li>
        </ul>
      </div>
   </div>
   <div class="new"></div>

$(".navMore li a").each(function() {
   $(this).on("click", function() {
            $('<div class="new"></div>').insertAfter($(this).closest('.row'));
            $('<div class="span"></div>').appendTo('.new');
   });
});

Finally I need to check if a div with class .new exists RIGHT AFTER the div containing the menu, and if so add a .span div in it, and if a div with class .new doesn’t exist, then create it and then insert a div with class .span in it:

$(".navMore li a").each(function() {
   $(this).on("click", function() {
      if($(this).next().hasClass("new")){
          $('<div class="span"></div>').appendTo('.new');
      }
      else {
            $('<div class="new"></div>').insertAfter($(this).closest('.row'));
            $('<div class="span"></div>').appendTo('.new');
      }
   });
});

It is IMPORTANT that the new div with class .new is a div with such a class right next the div container the menu. The reason why is because I will many menus with many different .row divs, so I wanted to target the correct one.

The above final code doesn’t work tho

Answer 1

You don’t need the each loop – also you notice how .new and .row are siblings?

$(".navMore li a").on("click", function() {
  var $el = $(this);
  var $row = $el.closest('.row'); // <-- get to row first
  if($row.next('.new').length){ // check next element
      $('<div class="span"></div>').appendTo('.new');
  }
  else {
        $('<div class="new"></div>').insertAfter($row);
        $('<div class="span"></div>').appendTo('.new');
  }
});

You also have your classes mixed up.. So you need to make sure they match

<div class="navMenu"> <!-- <-- here -->
    <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 1</a></li>
    </ul>
  </div>

and

$(".navMore li a") // <-- here