查询选择器错误:选择器无效

Question

我正在根据数据属性查找元素的最大数量，但是我想将jquery代码转换为本机vanilla js。我试图用vanillaJS的querySelector替换$选择器，但它抛出这样的错误。有没有办法将其转换为香草 JS。这是它返回的错误。

DOMException: Failed to execute 'querySelector' on 'Document': 'li:not(".expired")[data-arrange]' is not a valid selector

这是我的代码。

var max = Math.max.apply([], document.querySelector('li:not(".expired")[data-arrange]').map(function() {
            return $(this).data('arrange');
        }).get());

示例网页

<ul>
  <li data-arrange="1" class="rec expired">bONIE</li>
  <li data-arrange-"4" class="rec">eDS</li>
  <li data-arrange="5" class="expired">bue</li>
  <li data-arrange="6" class="rec">mag</li>
</ul>

谢谢。

Answer 1

此代码存在多个问题：

1. 不能在选择器.not内部使用"
2. 正如@AndrewBone所说，您可能想使用querySelectorAll
3. querySelectorAll返回一个NodeList[]因此.map将中断执行。

所以我想正确的代码必须是：

var selector = 'li:not(.expired)[data-arrange]';
    var array = Array.prototype.slice.call(document.querySelectorAll(selector));
    var max = Math.max.apply(null, array.map(function(item) {
                return parseInt(item.dataset.arrange);
            }));
    console.info(max)

<ul>
  <li data-arrange="1">1</li>
  <li data-arrange="4">4</li>
  <li data-arrange="5">5</li>
  <li data-arrange="6">6</li>
</ul>

Answer 2

我已经使用dloeda的代码解决了它。我刚刚修改了它一点，因为它使用 .get(( 返回错误;

var selector = 'li:not(.expired)[data-arrange]';
var array = Array.prototype.slice.call(document.querySelectorAll(selector));
var max = Math.max.apply(Math, array.map(function(item) {
        return item.dataset.arrange;
 }));