Skip to content
Browse files

Added support for append() etc to have multiple arguments (bug #413).…

… And tests for same.
  • Loading branch information...
1 parent 433df87 commit d9af2d52af3d3b2a1d771212e7a9d1decf3e1469 @nickzoic committed
Showing with 57 additions and 4 deletions.
  1. +8 −4 src/zepto.js
  2. +49 −0 test/zepto.html
View
12 src/zepto.js
@@ -62,7 +62,10 @@ var Zepto = (function() {
}
function fragment(html, name) {
- if (name === undefined) name = fragmentRE.test(html) && RegExp.$1;
+ if (name === undefined) {
+ if (!fragmentRE.test(html)) return document.createTextNode(html);
+ name = RegExp.$1;
+ }
if (!(name in containers)) name = '*';
var container = containers[name];
container.innerHTML = '' + html;
@@ -439,9 +442,10 @@ var Zepto = (function() {
}
adjacencyOperators.forEach(function(key, operator) {
- $.fn[key] = function(html){
- var nodes = isO(html) ? html : fragment(html);
- if (!('length' in nodes) || nodes.nodeType) nodes = [nodes];
+ $.fn[key] = function(){
+ var nodes = $.map(arguments, function(html) {
+ return isO(html) ? html : fragment(html);
+ });
if (nodes.length < 1) return this;
var size = this.length, copyByClone = size > 1, inReverse = operator < 2;
View
49 test/zepto.html
@@ -1169,6 +1169,7 @@
},
testAppendPrependBeforeAfter: function(t){
+ //test with string parameter
$('#beforeafter').append('append');
$('#beforeafter').prepend('prepend');
$('#beforeafter').before('before');
@@ -1190,6 +1191,25 @@
t.assertEqual('before<div id="beforeafter">prependappend</div>after', $('#beforeafter_container').html());
+ //test with multiple strings as parameters
+ $('#beforeafter_container').html('<div id="beforeafter"></div>');
+ $('#beforeafter').append('append1','append2');
+ $('#beforeafter').prepend('prepend1','prepend2');
+ $('#beforeafter').before('before1','before2');
+ $('#beforeafter').after('after1','after2');
+
+ t.assertEqual('before1before2<div id="beforeafter">prepend1prepend2append1append2</div>after1after2', $('#beforeafter_container').html());
+
+ //testing with multiple TextNodes as parameters
+ $('#beforeafter_container').html('<div id="beforeafter"></div>');
+
+ $('#beforeafter').append(text('append1'),text('append2'));
+ $('#beforeafter').prepend(text('prepend1'),text('prepend2'));
+ $('#beforeafter').before(text('before1'),text('before2'));
+ $('#beforeafter').after(text('after1'),text('after2'));
+
+ t.assertEqual('before1before2<div id="beforeafter">prepend1prepend2append1append2</div>after1after2', $('#beforeafter_container').html());
+
$('#beforeafter_container').html('<div id="beforeafter"></div>');
function div(contents){
@@ -1242,6 +1262,35 @@
$('#beforeafter_container').html()
);
+ //test with more than one node as parameters
+ $('#beforeafter_container').html('<div id="beforeafter"></div>');
+
+ $('#beforeafter').append(div('append1'),div('append2'));
+ $('#beforeafter').prepend(div('prepend1'),div('prepend2'));
+ $('#beforeafter').before(div('before1'),div('before2'));
+ $('#beforeafter').after(div('after1'),div('after2'));
+
+ t.assertEqual(
+ '<div>before1</div><div>before2</div><div id="beforeafter"><div>prepend1</div>'+
+ '<div>prepend2</div><div>append1</div><div>append2</div></div><div>after1</div><div>after2</div>',
+ $('#beforeafter_container').html()
+ );
+
+ //testing with more than one Zepto object as parameter
+ $('#beforeafter_container').html('<div id="beforeafter"></div>');
+
+ //testing with more than one Zepto object as parameters
+ $('#beforeafter').append($(div('append1')),$(div('append2')));
+ $('#beforeafter').prepend($(div('prepend1')),$(div('prepend2')));
+ $('#beforeafter').before($(div('before1')),$(div('before2')));
+ $('#beforeafter').after($(div('after1')),$(div('after2')));
+
+ t.assertEqual(
+ '<div>before1</div><div>before2</div><div id="beforeafter"><div>prepend1</div>'+
+ '<div>prepend2</div><div>append1</div><div>append2</div></div><div>after1</div><div>after2</div>',
+ $('#beforeafter_container').html()
+ );
+
//
var helloWorlds = [], appendContainer1 = $('<div> <div>Hello</div> <div>Hello</div> </div>'),

3 comments on commit d9af2d5

@pamelafox

What was your reason for changing fragment()? I incorporated this change but found that the fragment change messed up on $('bla').html('&#10003'); - seems like it escaped it somehow.

I changed fragment() back to its original form and I believe everything's working (including multiple append).

Thanks!

@nickzoic
Owner

G'day Pamela, I think it was to get it to pass tests with multiple string arguments. At least in Chromium, setting innerHTML doesn't seem to create Text Nodes correctly.

> x = document.createElement('div')
> x.innerHTML = "hello"
> x.childNodes
[]

This doesn't seem to be the case in Firefox though, so I guess its one of those things.
But I think you're right, changing fragment() was the wrong way to do it ... I'll try and work out a more elegant way ...

@nickzoic
Owner

Ha, it might be just me getting confused by the Chromium debug console ...

> x.childNodes
[]
> x.childNodes.length 
1
> x.childNodes[0]

> x.childNodes[0].nodeType == document.TEXT_NODE
true
> x.outerHTML
"<div>hello</div>"
Please sign in to comment.
Something went wrong with that request. Please try again.