javascript - 检查下一个元素是否具有特定的类

Question

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>

然后我在上面的 html 之后添加一个"new"div:

   <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');
   });
});

最后，我需要检查包含菜单的 div 后面是否存在类 .new 的 div，如果存在，则在其中添加 .span div，然后如果类 .new 的 div 不存在，则创建它，然后在其中插入类 .span 的 div:

$(".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');
      }
   });
});

重要的是，具有 .new 类的新 div 是紧邻菜单的 div 容器的具有此类类的 div。原因是因为我会使用许多带有许多不同 .row div 的菜单，所以我想定位正确的一个。

上面的最终代码不起作用

Answer 1

您不需要每个循环 - 您还注意到 .new 和 .row 是 sibling 吗？

$(".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');
  }
});

你的类(class)也混淆了..所以你需要确保它们匹配

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

和

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