纯JavaScript替代jQuery中的.not()方法

Question

在JavaScript中，有一个类似于jQuery的.not()的方法吗？我有一个$(".form :input").not的代码段，但需要将其转换为纯JavaScript。是否有可以帮助我的指南？

 var input = $(".form :input").not('button, [type="button"], [type="submit"]').on({
input: return
});

我希望您能够用JavaScript编写这个功能。

- user3537990

---

什么？我正在寻找一种替代方案... @Mike - user3537990

你应该告诉我们 JQuery 中 .not() 函数的作用是什么。也许有些人不知道 JQuery，但他知道 JavaScript，所以通过你的解释，他可以理解并用 JS 回答你的问题。 - SK.

或者只需将您想要的事物归为一个通用类别，不必担心其他问题。 - epascarello

看一下我的修改 @Mike - user3537990

@Ali .not(selector) 是用来删除已选择元素的，而不是一个否定运算符。 - vogomatix

Answer 1

现代浏览器在 querySelectorAll() 中支持NOT子句：

document.querySelectorAll(".form :input:not(...)");

示例(jsFiddle):

<div>This should be colored!</div>
<div>This should be colored!</div>
<div id="this-not">This must not colored!</div>
<div>This should be colored!</div>
<div>This should be colored!</div>

var matchedElements = document.querySelectorAll("div:not(#this-not)");
for (var i=0; i<matchedElements.length; i++) {
    matchedElements.item(i).style.backgroundColor = "red";
}

- ComFreek

---

当我尝试使用它时，会出现“Uncaught ReferenceError: querySelectorAll未定义fort.min.js:1（匿名函数）”的错误。 - user3537990

然后使用 document.querySelectorAll("");。 - derek_duncan

我再次遇到了Uncaught TypeError: undefined is not a function错误 @dandavis - user3537990

@user302975请展示给我们“转换后”的代码。我在我的回答中也添加了一个简单的例子。 - ComFreek

根据你更新的问题，你可以用几个逗号连接的not()修饰符来完成它。 - dandavis

Answer 2

你可以使用.filter()来排除你的数组中的项目。你可以按照如下方式使用它（MDN的例子）：

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

它被所有现代浏览器和IE9+支持。有关更多信息，请参见MDN上的Array.prototype.filter() 。

不幸的是，.filter()仅适用于数组，因此我们必须进行一些额外的操作来过滤NodeList。

HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li class="not-me">3</li>
    <li>4</li>
    <li>5</li>
</ul>

Javascript:

var filter = Array.prototype.filter;

var excludeByClassName = function(className) {
    return function (element) {
        return element.className != className;
    };
};

var LIs = document.getElementsByTagName('li');
// [li, li, li.not-me, li, li]

var filteredLIs = filter.call(LIs, excludeByClassName('not-me'));
// [li, li, li, li]

请参考这个 jsFiddle，里面有一个工作的例子。

- flitig

---

可能还包括如何获取一个Array。jQuery集合和NodeList都不是Array，不能继承它们的方法。 - Jonathan Lonowski

MDN提供了一些解决方法：https://developer.mozilla.org/en-US/docs/Web/API/NodeList - ComFreek

Answer 3

在纯JS中的同等代码大概是这样的。

var forms = document.querySelectorAll('.form'),
    inputs = [];

for (var i = forms.length; i--;) {
    var els = forms[i].querySelectorAll('input, textarea, select');

    for (var j = els.length; j--;) {
        if (els[j].type != 'button' && els[j].type != 'submit') {
            inputs.push(els[j]);
            els[j].addEventListener('input', cback, false);
        }
    }
}

function cback(event) {
    var b = [];

    for (var i = inputs.length; i--;) {
        if (!inputs[i].value.length) b.push(inputs[i]);
    }

    var l1 = b.length;
    var l2 = inputs.length;
    var top = document.querySelectorAll('.top');

    for (var j = top.length; j--;) {
        top[j].style.width = 100 - (l1 / l2) * 100 + "%";
    }
}

FIDDLE

- adeneo