Question

我找到了基于数据属性的元素的最大数量，但是我想将jquery代码转换为native vanilla js。我试图用vanillaJS的querySelector替换$ selector，但它会抛出这样的错误。有没有办法可以把它转换成香草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());

示例HTML

<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

此代码存在多个问题：

您无法在"选择器

.not

正如@AndrewBone所说，可能你想使用querySelectorAll
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的代码解决了这个问题。我刚刚将它修改为liitle位，因为它使用.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;
 }));

querySelector错误：无效的选择器

2 个答案: