1

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

这是我的常规代码（它是 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(like append()) 的结尾之前添加的，而不是在它之后添加的。当我在页面上手动插入它时，它工作正常。知道我应该如何解决这个问题吗？

已解决：因为我找不到一个真正好的答案，所以我是这样解决的：我打破了.container之后的 every.row并且不添加 my.detailview之后.row但在.container.

4

3 回答 3

0 
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);
}
于 2013-11-12T13:40:29.503 回答
0

使用 最近（）

$('.portfolio_item').click(function(){    
    var row = $(this).closest(".row");
    row.after('<div class="detailview">Detail Information</div>');
}
于 2013-11-12T13:15:55.170 回答
0

您正在考虑标记，但 DOM 不是标记，它是objects。

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

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

实例| 资源

不过，我觉得奇怪的是，您希望细节与实际单击的项目相距甚远（我认为这在您的标记和样式的一般上下文中是有意义的）。

另外，我建议使用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);
});

实例| 资源

于 2013-11-12T13:16:06.140 回答