javascript - 在迭代器中返回 element.parentNode

Question

我正在尝试为我构建一个类似 jquery 的实用程序库，这正是我主要使用 jQuery 的东西。

我有以下代码:

function jLib(selector) {

  this.elements = selector.nodeType ? [ selector ] : document.querySelectorAll(selector);


  this.each = function(cb) {
    for(var i = 0; i < this.elements.length; i++) {           
        var el = this.elements[i];
        cb.call(this, el);
    }
  };


  this.parent = function() {
    this.each(function(element) {
       return element.parentNode;
    });
  };

  this.addClass = function(className) {

        this.each(function(element) {
            className.split(' ').forEach(function(_className) {
                element.classList.add(_className);
            });
        });

        return this;
    };

}


new jLib('.has_parrent').parent().addClass('border');

我正在尝试循环遍历元素然后返回 element.parentNode，但正如预期的那样函数在第一次返回时退出。

有人可以向我解释如何发送元素的父元素以便我可以访问我的库中的其他方法吗？

new jLib('.has_parrent').parent().addClass('border');

Answer 1

您需要让 parent() 返回一个新的 jLib 对象，其中包含像这样的父元素

function isArray(obj) {
  return Array.isArray(obj);
}

function jLib(selector) {
  this.elements = selector.nodeType ? [selector] : (isArray(selector) ? selector : document.querySelectorAll(selector));


  this.each = function(cb) {
    for (var i = 0; i < this.elements.length; i++) {
      var el = this.elements[i];
      cb.call(this, el);
    }
  };


  this.parent = function() {
    var els = [].map.call(this.elements, function(element) {
      return element.parentNode;
    });

    return new jLib(els);
  };

  this.addClass = function(className) {

    this.each(function(element) {
      className.split(' ').forEach(function(_className) {
        element.classList.add(_className);
      });
    });

    return this;
  };

}


new jLib('.has_parrent').parent().addClass('border');

.border {
  border: 1px solid red;
  margin-bottom: 5px;
}

<div class="parent">
  <div class="has_parrent">has parrent</div>
</div>

<div class="parent parent-2">
  <div class="has_parrent">has parrent</div>
</div>