Javascript OOP 使用 getElementsByClassName 方法获取子元素

Question

我在使用 getElementsByClassName 方法获取子项时遇到问题。

我正在使用 OOP 方式，就像 Jquery 一样。

"use strict";

var $, i;

(function() {

  $ = function(el) {
    return new obj$(el);
  };

  var obj$ = function(el) {

    var firstChar = el.charAt(0),
        cl        = document.getElementsByClassName(el.slice(1));

    switch (firstChar) {
      case ".":
        for (i = 0; i < this.length; i++) {
          this[i] = cl[i];
        }
        break;

    }

  };

  obj$.prototype = {

    find : function(child) {

      for (i = 0; i < this.length; i++) {
        this[i].getElementsByClassName(child)[0];
      }

      return this;

    },
    html : function(data) {

      for (i = 0; i < this.length; i++) {
        this[i].innerHTML = data;
      }

      return this;

    }

  };

})();

var x = $(".parent").find("child").html("replace!");
console.log(x);

<div class="parent">
  this is parent 1
  <p class="child">test 1</p>
</div>
<div class="parent">
  this is parent 2
  <p class="child">test 2</p>
</div>
<div class="parent">
  this is parent 3
  <p class="child">test 3</p>
</div>

jsFiddle:https://jsfiddle.net/Lng5mn3o/

这不起作用。

Answer 1

我已经为你更新了 fiddle - https://jsfiddle.net/Lng5mn3o/3/

我在jsfiddle示例中更改的主要内容是，我创建了this['elements']来存储匹配的元素并在循环休息中使用它的长度是可以的你的代码

 // define blank array
 this['elements'] = new Array();

 // store elements
 this['elements'][i] = cl[i];

 // loop over that elements     
 for (i = 0; i < this['elements'].length; i++) {