javascript - 在嵌套的 HTML 结构中添加新的 div

Question

我有这个 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>

最后，如果我们插入了 3 个 div，我该怎么做，#content然后从一个新的.row-fluiddiv 重新开始，然后再重新开始？

Answer 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

Answer 2

最终我选择了这个：

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

Answer 3

function insertRow() {
    $newdiv = $("<div class='row-fluid'/>");
    $newdiv.insertAfter(".row-fluid:last");
    return $newdiv;
}

// assume you're passing a content object into the routine
function insertContent( contentObj) {
    $lastRow = $(".row-fluid:last");
    if( $lastRow.children().length >= 3) {
        insertRow().append( contentObj);
    } else {
        $lastRow.append( contentObj);
    }
    return contentObj;
}