0

私はこのhtml構造とコードを持っています:

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>

<div class="row-fluid"></div>


$(".navMore li a").each(function() {
   $(this).on("click", function() {
        $('<div class="row-fluid"></div>').insertAfter($(this).closest('.row-fluid'));
        $('<div id="content" class="span4"></div>').insertAfter($(this).next('.row-fluid'));
   });
});

.row-fluid前の div の直後に新しい div を追加する必要があります.row-fluid

期待される結果：

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid"></div>

しかし、すでに新しい.row-fluiddiv を追加している場合、#contentdiv はこの新しく追加されたrow-fluiddiv内に配置する必要があります。

どうすればこれを達成できますか?

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>
    <div class="row-fluid"></div>
    <div class="row-fluid">
        <div id="content" class="span4"></div>
    </div>

#content最後に、3 つの div を挿入し、新しい.row-fluiddiv からやり直し、すべてをやり直す場合、どうすればよいでしょうか?

4

3 に答える 3

1

どうぞ。

<script type="text/javascript" >
$(document).ready(function () {
    $(".navMore li a").click(function() {

    var countOfDiv = $(".row-fluid").length;
    if(countOfDiv < 2)
            $('<div class="row-fluid"></div>').insertAfter(".row-fluid");
    else
        $(".row-fluid:last").html("<div id=\"content\" class=\"span4\"></div>");
    });
});

</script>
  • リンク1
  • リンク2
    • 于 2013-01-29T20:59:49.353 に答える
    0

    最終的に私はこれで行きました：

    $(".navMore li a").on("click", function() {
  var $el = $(this);
  var $row = $el.closest('.row');
  if($row.next('.new').length){
     $('<div class="span"></div>').appendTo('.new');
  }
  else {
    $('<div class="new"></div>').insertAfter($row);
    $('<div class="span"></div>').appendTo('.new');
  }
});
    于 2013-01-29T22:50:34.600 に答える