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

最后，我需要检查一个包含类.new的div是否存在于包含菜单的div之后，如果存在，则在其中添加.span div，如果div为{{1}不存在，然后创建它，然后在其中插入一个包含类.new的div：

.span

重要的是，类$(".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'); } }); });的新div是一个div，这个类就在div容器的菜单旁边。原因是因为我会有很多不同.new div的菜单，所以我想定位正确的。

以上最终代码不起作用

Answer 1

您不需要每个循环 - 您还注意到.new和.row是兄弟姐妹的方式吗？

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

你的课程也混淆了......所以你需要确保它们匹配

<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

Answer 2

foreach循环是不必要的。您可以直接将单击事件绑定到选择器中的所有项目，而不是循环遍历集合并单独绑定它们。

我会将click事件绑定到.row div，因为click事件会冒出来......这将使您的选择器非常容易测试下一个兄弟是否有.new类。 / p>

$('.row').click(function() {
   var newDiv = $(this).next();
   if(newDiv.hasClass('new')){
      $('<div class="span"></div>').appendTo(newDiv);
  }
  else {
        newDiv = $('<div class="new"></div>');
        newDiv.insertAfter($(this));
        $('<div class="span"></div>').appendTo(newDiv);
  }
});

修改

我之所以选择绑定到.row，是因为关于事件如何传播到父母的DOM规则的一部分说如果有人点击Anchor标签，那么它会将事件发送到DOM中的父节点。所以这意味着，如果我们正在监听标签的父级点击，那么它就好像点击来自所述父级（在这种情况下，是.row div）。

Answer 3

$(".navMenu ul li a").on("click", function () {
    if ($(this).closest('.row').next('.new').length) {
        $('<div class="span"></div>').appendTo('.new');
    } else {
        $('<div class="new"><div class="span">This is a span.</div></div>').insertAfter($(this).closest('.row'));
    }
});

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

3 个答案: