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

我为你更新了小提琴 - 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++) {

Javascript OOP使用getElementsByClassName方法获取子项

1 个答案: