使用 JQuery 在 HTML div 之后添加 CSS 类答案

【问题标题】：Add CSS Class after HTML div using JQuery使用 JQuery 在 HTML div 之后添加 CSS 类
【发布时间】：2013-09-12 21:01:37
【问题描述】：

我有这个 HTML

            <div class="portItem"></div>
            <div class="portItem"></div>
            <div class="portItem"></div>
            <div class="portItem"></div>

这个 CSS

 .rectangle {
   height: 250px;
   width: 100%;
   position: relative;
   display: none;
   background: #ffffff;
   box-shadow: 1px 0px 20px black;
   overflow-y: hidden;}

      Here's the CSS for portItem, although not necessary (forms 4 green blocks next to each other)

     .portItem {
       height: 180px;
       width: 250px;
       position: relative;
       display: inline-block;
       background: #D0E182;
        margin: 0 5px 5px 0;

我正在尝试在我单击的任何 portItems 之后添加 CSS 矩形。

这是我尝试使用的 JQuery 函数：

 $(document).ready(function() {
   $('.portItem').click(function() {
     addDiv($(this));
   });
 });



 function addDiv($ele) {
   var $box = $('<div />' '.rectangle');
   $box.insertAfter($ele);
 }

问题在于 var $box 语句，我无法让它工作。

提前致谢！

【问题讨论】：

标签： javascript jquery css class insertafter

【解决方案1】：

您缺少一个逗号和一个对象。

var $box = $('<div />', {'class':'rectangle'});
// -------------------^ ^                   ^
//    added comma-----| |___________________|---and object literal syntax

class 周围的引号需要支持旧版浏览器。你也可以改用className。

var $box = $('<div />', {className:'rectangle'});

【讨论】：

谢谢！还有一个事实是我有 display:none... 也改变了它，现在它可以工作了

【解决方案2】：

这个怎么样：

var $box = $('<div/>').addClass('rectangle');

...或者简单到...

var $box = $('<div class="rectangle"/>');

实际上，我可能会考虑先准备好这个项目，然后cloning 它。例如：

var $boxTemplate = $('<div class="rectangle">');
function addDiv($ele) {
   $boxTemplate.clone().insertAfter($ele);
}

【讨论】：

【解决方案3】：

将 var $box 行更改为：

var $box = $('<div class="rectangle" />');

【讨论】：