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が存在するかどうかを確認する必要があります。存在する場合は、その中にdivを追加し、.spanクラスのあるdivが.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');
      }
   });
});

.newクラス付きの新しいdivが、メニューのdivコンテナのすぐ隣にあるそのようなクラスを持つdivであることが重要です。その理由は、私は多くの異なるdivを持つ多くのメニューを.row作成するため、正しいものをターゲットにしたかったからです。

上記の最終的なコードは機能しません

4

3 に答える 3

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
于 2013-01-29T22:34:15.237 に答える
1

foreachループは不要です。セットをループして個別にバインドするのではなく、クリックイベントをセレクター内のすべてのアイテムに直接バインドできます。

クリックイベントがバブルアップするので、クリックイベントをdivにバインドします...これにより、セレクターで次の兄弟にクラス.rowがあるかどうかを非常に簡単にテストできます。.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ルールの一部で、誰かがアンカータグをクリックすると、DOM内の親にイベントが送信されると述べているためです。つまり、タグの親のクリックをリッスンしている場合、クリックがその親（この場合は.rowdiv）からのものであるかのように表示されます。

于 2013-01-29T22:38:16.613 に答える
-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 に答える