获取包含它的最近元素的特定数据属性的值给出 TypeError

Question

在我的库中，我想为 closest() 编写一个小函数，特别是获取最近元素的特定 data-attribut 的值，因为在我的应用程序中我需要非常频繁地使用它。 :D

但控制台只告诉我：

TypeError: x.getAttribute is not a function

var $ = function(s) {
  var x;
  var obj = {
    myLib(s) {
      return x || querySelectorAll(s);
    },
    myFunction(s) {
      if (s.startsWith('data-')) { // in this block is sth. wrong
        x = [x[0].closest('*["' + s + '"]')];
        return x.getAttribute(s);
      } else {
        x = [x[0].closest(s)];
        return this;
      }
    }
  };
  x = obj.myLib(s);
  return obj;
};

////////// usage examples

// get the value of attribute "data-wrestler"
var dv = $('.kilo').myFunction('data-wrestler');
console.log(dv);

// select the closest element by selector
var ce = $('.kilo').myFunction('.uniform');
console.log(ce);

// would select the closest element with specific data-attribut by selector
var da = $('.kilo').myFunction('*["data-wrestler"]');
console.log(da);

<div id="foxtrott">
  foxtrott
  <div class="uniform" data-wrestler="hulkster">
    uniform
    <div class="charlie">
      charlie
      <div class="kilo">
        kilo
      </div>
    </div>
  </div>
</div>

Answer 1

引用 [data-wrestler] - 删除它们 x = [x[0].closest('[' + s + ']')];
您使用 document.querySelectorAll - 它 return 是一个集合，因此您需要使用 [0]

return x[0].getAttribute(s);

或改为document.querySelector

获取包含它的最近元素的特定数据属性的值给出 TypeError

Get value of specific data-attribute of closest element containg it gives TypeError

javascript

closest

selectors-api

getattribute