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

之后添加一个新的.row-fluid div

预期结果：

<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-fluid div，那么#content div应放在这个新添加的row-fluid div

中

我如何实现这一目标？

<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个#content div，再次使用新的.row-fluid div再次启动，我怎么能这样做呢？

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>

Link 1

Link 2

Answer 2

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

Answer 3

最终我选择了这个：

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

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

3 个答案: