1

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 之后添加一个“新”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，如果存在，则在其中添加一个.spandiv，如果.new不存在具有类的 div，则创建它，然后插入一个具有类的.spandiv它：

$(".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.new是一个在 div 容器菜单旁边具有这样一个类的 div。原因是因为我会使用许多具有许多不同.rowdiv 的菜单，所以我想定位正确的一个。

上面的最终代码不起作用

4

3 回答 3

1

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

我会将点击事件绑定到.rowdiv，因为点击事件会冒泡......这将使您的选择器非常容易测试下一个兄弟是否有一个.new类。

$('.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 中的父级发送事件。所以这意味着如果我们正在监听一个标签的父级的点击，它看起来好像点击来自那个父级（在这种情况下，一个.rowdiv）。

于 2013-01-29T22:38:16.613 回答
1

您不需要 each 循环 - 您还注意到兄弟姐妹是如何.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
于 2013-01-29T22:34:15.237 回答
-1 
$(".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'));
    }
});
于 2013-01-29T22:34:22.797 回答