Merge pull request #29 from moggers87/15-before-after

before/after

smallquery.js

@@ -247,9 +247,9 @@ smallQuery.prototype.parents = function(selector) {
 (function(window){
 "use strict";
 /*
- * Append/Prepend API
+ * Append/Prepend/Before/After API
  *
- * The append and prepend methods are defined here. Self explanatory.
+ * The append, prepend, before, after methods are defined here. Self explanatory.
  *
  */
 
@@ -293,6 +293,28 @@ smallQuery.prototype.append = function(arrayOrElement) {
 
     return this;
 };
+
+smallQuery.prototype.before = function(arrayOrElement) {
+    var targetCount = this.length;
+
+    this.each(function(index) {
+        var clone = targetCount && index + 1 < targetCount;
+        Element.prototype.before.apply(this, prepareElements(arrayOrElement, clone));
+    });
+
+    return this;
+};
+
+smallQuery.prototype.after = function(arrayOrElement) {
+    var targetCount = this.length;
+
+    this.each(function(index) {
+        var clone = targetCount && index + 1 < targetCount;
+        Element.prototype.after.apply(this, prepareElements(arrayOrElement, clone));
+    });
+
+    return this;
+};
 })(window);
 
 (function(window){

spec/smallquery/append_spec.js

@@ -137,3 +137,131 @@ describe("the prepend function", function() {
 
     });
 });
+
+describe("the before functon", function() {
+    var $obj;
+
+    beforeEach(function() {
+        $obj = $("<ul><li>Hello</li><li>Hi</li>/ul>");
+    });
+
+    it("should add an element before selected element", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children(":first-child").before($li);
+        expect($obj.children()[0].textContent).toEqual("Bye");
+    });
+
+    it("should add an element before multiple selected elements", function() {
+        var $li = $("<li>Bye</li>");
+        var $children = $obj.children();
+        $children.before($li);
+
+        for (var i = 0; i < $children.length; i++) {
+            if (i % 2 === 0) {
+                expect($obj.children()[i].textContent).toEqual("Bye");
+            } else {
+                expect($obj.children()[i].textContent).not.toEqual("Bye");
+            }
+        }
+    });
+
+    it("should add multiple elemets before selected element", function() {
+        var $li = $("<li>Bye</li><li>ByeBye</li>");
+        $obj.children(":first-child").before($li);
+        var children = $obj.children();
+        expect(children.length).toBe(4);
+        expect(children[0].textContent).toEqual("Bye");
+        expect(children[1].textContent).toEqual("ByeBye");
+        expect(children[2].textContent).toEqual("Hello");
+        expect(children[3].textContent).toEqual("Hi");
+    });
+
+    it("should add a vanilla element before selected element", function() {
+        var li = $("<li>Bye</li>")[0];
+        $obj.children(":first-child").before(li);
+        expect($obj.children()[0].textContent).toEqual("Bye");
+    });
+
+    it("should not clone if only one element is selected", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children(":first-child").before($li);
+        var newLi = $obj[0].children[0];
+        $li[0].testMe = "test!";
+        expect(newLi.testMe).toEqual("test!");
+    });
+
+    it("should not clone the last element if there is more than one selected element", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children().before($li);
+        var $children = $obj.children();
+        $li[0].testMe = "test!";
+        expect($children[0].testMe).toBeUndefined();
+        expect($children[1].testMe).toBeUndefined();
+        expect($children[2].testMe).toEqual("test!");
+        expect($children[3].testMe).toBeUndefined();
+    });
+});
+
+describe("the after functon", function() {
+    var $obj;
+
+    beforeEach(function() {
+        $obj = $("<ul><li>Hello</li><li>Hi</li>/ul>");
+    });
+
+    it("should add an element after selected element", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children(":first-child").after($li);
+        expect($obj.children()[1].textContent).toEqual("Bye");
+    });
+
+    it("should add an element after multiple selected elements", function() {
+        var $li = $("<li>Bye</li>");
+        var $children = $obj.children();
+        $children.after($li);
+
+        for (var i = 0; i < $children.length; i++) {
+            if (i % 2 === 0) {
+                expect($obj.children()[i].textContent).not.toEqual("Bye");
+            } else {
+                expect($obj.children()[i].textContent).toEqual("Bye");
+            }
+        }
+    });
+
+    it("should add multiple elemets after selected element", function() {
+        var $li = $("<li>Bye</li><li>ByeBye</li>");
+        $obj.children(":first-child").after($li);
+        var children = $obj.children();
+        expect(children.length).toBe(4);
+        expect(children[0].textContent).toEqual("Hello");
+        expect(children[1].textContent).toEqual("Bye");
+        expect(children[2].textContent).toEqual("ByeBye");
+        expect(children[3].textContent).toEqual("Hi");
+    });
+
+    it("should add a vanilla element after selected element", function() {
+        var li = $("<li>Bye</li>")[0];
+        $obj.children(":first-child").after(li);
+        expect($obj.children()[1].textContent).toEqual("Bye");
+    });
+
+    it("should not clone if only one element is selected", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children(":first-child").after($li);
+        var newLi = $obj[0].children[1];
+        $li[0].testMe = "test!";
+        expect(newLi.testMe).toEqual("test!");
+    });
+
+    it("should not clone the last element if there is more than one selected element", function() {
+        var $li = $("<li>Bye</li>");
+        $obj.children().after($li);
+        var $children = $obj.children();
+        $li[0].testMe = "test!";
+        expect($children[0].testMe).toBeUndefined();
+        expect($children[1].testMe).toBeUndefined();
+        expect($children[2].testMe).toBeUndefined();
+        expect($children[3].testMe).toEqual("test!");
+    });
+});