Добавить CSS класс после того, как HTML DIV с помощью JQuery

Question

У меня есть этот 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; 

И я пытаюсь добавить CSS прямоугольник после того, как любой из portItems, что я нажимаю на ,

Вот функция JQuery Я пытаюсь использовать:

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



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

Проблема с утверждением вар $ коробки, я не могу заставить его работать.

Заранее благодарен!

Answer 1

Вам не хватает запятой и объекта.

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

---

Кавычки вокруг class необходимы для поддержки старых браузеров. Вместо этого вы можете использовать className.

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

Answer 2

Как об этом:

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

... или же просто, как ...

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

На самом деле, я мог бы рассмотреть вопрос о подготовке этот пункт из первых рук, а затем просто cloning его. Например:

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

Answer 3

Изменение $ строчный бокс вар на:

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