如何在自定义可链接 JavaScript 库中对 querySelectorAll 选择的第一个元素调用 closest()？

Question

我尝试在我的自定义 JavaScript 库中对 querySelectorAll 选择的第一个元素调用 closest() 究竟有什么问题？

var $ = function(selector){

  var x; 
  var obj = {
  
    myLib(selector){
      return x || document.querySelectorAll(selector);
    },
    
    cl(selector){
      x[0].closest(selector);
      return this;
    },
      
    style(aaa,bbb){
           !aaa && !bbb ? x.getAttribute('style')                         :
            aaa &&  bbb ? x.forEach( zzz => { zzz.style[aaa]=bbb;     } ) :
      aaa.includes(';') ? x.forEach( zzz => { zzz.style.cssText+=aaa; } )
                        : getComputedStyle(x,null)[aaa];
      return this;
    },
      
  };
        
  x = obj.myLib(selector);
  return obj;
  
};

// now i want to call it

$('div').style('background','#FFFF00');
$('.kilo').cl('.uniform').style('color:','#880088');

<div id="foxtrott">
  foxtrott
  <div class="uniform">
    uniform
    <div class="charlie">
      charlie
      <div class="kilo">
        kilo
      </div>
    </div>
  </div>
</div>

当我将 cl() 函数更改为此时，控制台会告诉我：$(...).cl(...) is null

cl(selector){
  return x[0].closest(selector);
},

我真的不明白如何正确地做到这一点。 :(

Answer 1

您没有在 cl 中设置 x。

即

    cl(selector) {
      x = [x[0].closest(selector)];
      return this;
    },

另外请注意，您需要在 'border-left:' 上删除尾随冒号（编辑：或在您的最新版本中 'color:'）

这是一个 "working" 示例 https://repl.it/repls/MixedRipeGlobalarrays

如何在自定义可链接 JavaScript 库中对 querySelectorAll 选择的第一个元素调用 closest()？

How to call closest() on first element selected by querySelectorAll in custom chainable JavaScript library?

javascript

closest

selectors-api