Question

我尝试在有人点击我网站上的某个项目后添加详细信息。

这是我的常规代码（它是Bootstrap 3）：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-xs-12">
            <div class="portfolio_item">
                <!-- Info -->
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xs-12">
            <div class="portfolio_item">
                <!-- Info -->
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xs-12">
            <div class="portfolio_item">
                <!-- Info -->
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Same as above -->
    </div>
</div>

如果有人点击一个portfolio_item，那么在该用户点击的行之后应该会有一个新的div。

$('.portfolio_item').click(function(){    
    var row = $(this).parent().parent();
    row.after('</div><div class="detailview">Detail Information</div><div class="container">');
}

如你所见，我打破了容器。那部分不起作用。当我记录我的页面的源代码时。这就是我所看到的：

<div class="container">
    <div class="row">
        <!-- Same Row Info -->
    </div><div class="detailview">Detail Information</div><div class="container"></div>
    <div class="row">
        <!-- Same Row Info -->
    </div>
</div>

正如您所看到的，它似乎是在.row结束之前添加的（如append()），而不是之后。当我在页面上手动插入它时，它工作正常。知道我该如何解决这个问题吗？

解决了：由于我无法找到一个非常好的答案，所以我解决了这个问题：我在每{{1}之后突破.container并且不要在.row之后但.detailview之后添加.row。

Answer 1

使用 closest()

$('.portfolio_item').click(function(){    
    var row = $(this).closest(".row");
    row.after('<div class="detailview">Detail Information</div>');
}

Answer 2

你在考虑标记，但DOM不是标记，它是对象。

如果您想在用户所在的行之后插入新的div，那么您真的很接近，只需指定要添加的内容：

$('.portfolio_item').click(function(){    
    var row = $(this).parent().parent();
    row.after('<div class="detailview">Detail Information</div>');
});

Live Example | Source

我觉得奇怪的是，你希望细节远离实际点击的项目（我认为它在你的标记和样式的一般上下文中是有意义的。）

另外，我建议使用closest(".row")而不是parent().parent()。

在评论中，您说过要实际拆分容器。您可以这样做，但要做到这一点，您必须创建一个新容器，将有关行后面的行移动到其中，然后附加它。方法如下：

$('.portfolio_item').click(function(){    
  var row = $(this).closest(".row");
  var followingRows = row.nextAll();
  var container = row.closest(".container");
  var newContainer = $('<div class="container"></div>');
  newContainer.insertAfter(container);
  $('<div class="detailview">Detail Information</div>').insertAfter(container);
  newContainer.append(followingRows);
});

Live Example | Source

Answer 3

var html = '</div><div class="detailview">Detail Information</div><div class="container">';

$('.portfolio_item').click(function(){    
    var row = $(this).closest(".row").after(html);
   console.log(row);
}

jQuery - 在div之后插入div

3 个答案: