Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<head>
  <title>JS Bin</title>
  <link href="http://code.jquery.com/qunit/qunit-1.18.0.css" rel="stylesheet"/>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    module('$ find elements');
    test('$.fn.find', function(){
            var $ul = $('#qunit-fixture')
                .html('<ul><li/><li/></ul><ul><li/><li/></ul>')
                .find('ul');
            
            equal($ul.length, 2, 'got 2 uls');
            equal($ul.find('li').length, 4, 'got four lis');
        });
    
        test('$.fn.children', function(){
            var $ul = $('#qunit-fixture')
                .html('<ul><li/><li/></ul><ul><li/><li/></ul>')
                .children();
            
            equal($ul.length, 2, 'got 2 uls');
            equal($ul.children().length, 4, 'got four lis');
        });
        test('$.fn.parent', function(){
            var $lis = $('#qunit-fixture')
                .html('<ul><li/><li/></ul><ul><li/><li/></ul>')
                .find('li:first-child');
            
            equal($lis.length, 2, 'got 2 uls');
            equal($lis.parent().length, 2, 'got 2 lis');
        });
        test('$.fn.next', function(){
            var $lis = $('#qunit-fixture')
                .html('<ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul>')
                .find('li:first-child');
            
            equal($lis.length, 2, 'got 2 lis');
            equal($lis.next().length, 2, 'got 2 lis');
            equal($lis.next().next().length, 0, 'got 0 lis');
        });
        test('$.fn.prev', function(){
            var $lis = $('#qunit-fixture')
                .html('<ul><li/><li/></ul><ul><li/><li/></ul>')
                .find('li:last-child');
            
            equal($lis.length, 2, 'got 2 uls');
            equal($lis.prev().length, 2, 'got 2 lis');
            equal($lis.prev().prev().length, 0, 'got 2 lis');
        });
  </script>
</body>
</html>
 
//This week we'll be filling in the following methods: $, $.prototype.html, $.prototype.val, $.prototype.text and $.prototype.find. The code from last week's session has also been added in lines 5-54.
$ = function(selector) {
  if(!(this instanceof $)) {
    return new $(selector);
  }
  var elements;
  if(isArrayLike(selector)) {
    elements = selector;
  }
  else {
    elements = document.querySelectorAll(selector);
  }
  [].push.apply(this, elements);
};
$.extend = function(target, object) {
  for (var prop in object) {
    if (object.hasOwnProperty(prop)) {
      target[prop] = object[prop];
    }
  }
  return target;
};
var isArrayLike = function(obj) {
  return obj && typeof obj === "object" && (obj.length === 0 || typeof obj.length === "number" && obj.length > 0 && obj.length - 1 in obj);
};
$.extend($, {
  isArray: function(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]";
  },
  each: function(collection, cb) {
    if (isArrayLike(collection)) {
      for (var i = 0; i < collection.length; i++) {
        cb.call(collection[i], i, collection[i]);
      }
    } else {
      for (var prop in collection) {
        cb.call(collection[prop], prop, collection[prop]);
      }
    }
    return collection;
  },
  makeArray: function(arr) {
    if ($.isArray(arr)) {
      return arr;
    }
    var array = [];
    $.each(arr, function(i, item) {
      array[i] = item;
    });
    return array;
  },
  proxy: function(fn, context) {
    return function() {
      return fn.apply(context, arguments);
    };
  },
  fn: $.prototype
});
$.extend($.prototype, {
  html: function(newHtml) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.innerHTML = newHtml;
      });
    }
    else {
      return this[0].innerHTML;
    }
  },
  val: function(newVal) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.value = newVal;
      });
    }
    else {
      return this[0].value;
    }
  },
  text: function(newText) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.innerText = newText;
      });
    }
    else {
      return this[0].innerText;
    }
  },
  find: function(selector) {
    var elements = []
    $.each(this, function() {
      var els = this.querySelectorAll(selector);
      if(els) {
        [].push.apply(elements, els);
      }
    });
    return $(elements);
  },
  next: function() {},
  prev: function() {},
  parent: function() {},
  children: function() {}
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x