jquery .add() not adding html element

Question

I have an array of elements, which i wish to put into one jquery object. jquery.add() does not seem to be adding elements into my jquery object. I have console logs showing that the things I am adding are indeed html elements, yet still they arent added in what am i doing wrong?

my code:

console.log('iterating')
console.log(content)
//add the content into the jquery item, and then we can load it into the qtip
_.each(additionalContent, function(value, element, list){
console.log('adding')
console.log(value)
console.log(content.length)
content.add(value) //trying content.add($(value)) gives the same result/output
console.log(content.length)
})

console.log('asdf')
console.log(content.length)
console.log(content)

====================== prints the following:

iterating 
[p.nonVendor unselectable, selector: "", context: undefined, jquery: "1.9.1", constructor: function, init: function…]
adding 
<button class type="button" data-loading-text="OK" style="text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-family: arial; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); z-index: 2; display: inline; left: auto; top: auto; width: 35.77777862548828px; height: 17.777777671813965px;">OK</button>
1 
1 
adding
<button class type="button" data-loading-text="Cancel" style="text-align: center; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-family: arial; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); z-index: 2; display: inline; left: auto; top: auto; width: 35.77777862548828px; height: 17.777777671813965px;">Cancel</button>
1 
1 
asdf 
1 
[p.nonVendor unselectable, selector: "", context: undefined, jquery: "1.9.1", constructor: function, init: function…]

Where exactly are you using 'jquery.add()' to add the Elements ? — dreamweiver
– dreamweiver, Commented Oct 26, 2013 at 14:41
yes i tried content.add($(value)) /// the output is exactly the same — user2099089
– user2099089, Commented Oct 26, 2013 at 14:47

Wagner DosAnjos · Accepted Answer · 2013-10-26 15:39:03Z

3

.add() does not change the original var, so you need to assign the result back to 'content' as follows:

content = content.add($(value));

answered Oct 26, 2013 at 15:39

Wagner DosAnjos

6,3841 gold badge18 silver badges30 bronze badges

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

Comments

Henry Florence · Accepted Answer · 2013-10-26 16:19:04Z

To create a javascript array containing both the objects in content and additionalContent the following code will work:

elements = [];
content.each(function(index, value) {
    elements.push(value);
});
additionalContent.each(function(index, value) {
    elements.push(value);
});

A couple of points:

the first argument of your each function will be loaded with an index (similar to using a for loop: for( int index = 0; index < content.length; index++ ), the second argument is the element
the jQuery method .add is used for handling selectors rather than collections of objects and does not behave quite in the way required for your code

The elements collection can then be used in an object - is this what you require?

Edit - to concatenate the Jquery Selectors:

as wdosanjos points out the following will work - no .each required:

content = content.add(additionalContent);

To add the css class sausage to all of the elements in both selectors:

content.add(additionalContent).addClass('sausage');

Collectives™ on Stack Overflow

jquery .add() not adding html element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related