21

How would I create an object in jQuery, and then proceed to make a couple of different instances of this object I.e

Create an object named box which holds a variable called color.

And then make a couple of instances of this object with different stored colours.

5
  • 1
    What are you trying to achieve, exactly? Commented Jul 6, 2012 at 2:05
  • I want to explore object-oriented jQuery but do not know how to construct a class and then initialise an object Commented Jul 6, 2012 at 2:07
  • use jquery's.map() function Commented Jul 6, 2012 at 2:07
  • 3
    This is a job for javascript alone, jQuery is a framework built on javascript with its focus set on DOM manipulation, javascript is a language. It has become a common misconception that jQuery is a language itself. Commented Jul 6, 2012 at 2:08
  • Maybe this might help? 3 ways to define a JavaScript class Commented Jul 6, 2012 at 2:09

4 Answers 4

46

Another way to make objects in Javascript using JQuery, getting data from the dom and pass it to the object Box and, for example, store them in an array of Boxes, could be:

var box = {}; // my object
var boxes =  []; // my array

$('div.test').each(function (index, value) {
    color = $('p', this).attr('color');
    box = {
        _color: color // being _color a property of `box`
    }
    boxes.push(box);
});

Hope it helps!

Sign up to request clarification or add additional context in comments.

Comments

11

May be you want this (oop in javascript)

function box(color)
{
    this.color=color;
}

var box1=new box('red');    
var box2=new box('white');    

DEMO.

For more information.

1 Comment

for this kind of construction use Box (in capital letters)
8

I actually found a better way using the jQuery approach

var box = {

config:{
 color: 'red'
},

init:function(config){
 $.extend(this.config,config);
}

};

var myBox = box.init({
 color: blue
});

Comments

1

You can always make it a function

function writeObject(color){
    $('body').append('<div style="color:'+color+';">Hello!</div>')
}

writeObject('blue')enter image description here

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.