How to use jQuery method 'not()' in pure JavaScript?

Question

How can be jQuery not performed on javascript ?

<div id='outerdiv'>
    <div class='class-1'></div>
    <div class='class-2'></div>
    <div class='class-3'></div>
    <div class='class-4'></div>
    <div class='news'></div>
</div>

$('#outerdiv').not('.news').css('background-color', 'red');

I want to exclude few elements which could be performed by using jQuery not but at the moment, I want it on javascript.

Duplicate of http://stackoverflow.com/questions/11809770/getelementsbytagname-exclude-elements-filter ? — Bas van Dijk, Dec 09 '13 at 07:08
@dholakiyaankit : I don't think you have read my question properly since the link you have mentioned is not similar at all. — hsuk, Dec 09 '13 at 08:20
(Does that jQuery example even make sense? There shouldn't be a `td` in the given jQuery collection to begin with .. in any case, the first linked/duplicate answer is entirely relevant. Just *don't* include elements from the source set in the target set if the should be excluded..) — user2864740, Dec 09 '13 at 08:51
possible duplicate of [Jquery: exclude element](http://stackoverflow.com/questions/6251151/jquery-exclude-element) — Jurik, Dec 09 '13 at 08:52
@Jurik : Bro, how can it be duplicate, I want to know the use of it in javascript ... — hsuk, Dec 09 '13 at 08:53
And you still should provide us your html. Because the JS in your question looks valid. So I guess it's a pointer mistake in your code. — Jurik, Dec 09 '13 at 08:56
There are a few issues with this question. Firstly, without knowing your markup structure, we can't provide any meaningful insight into how best to solve your problem. Moreover, jQuery *is* JavaScript. It is a JS library. It is written entirely in "pure JavaScript." Why not use it? Finally, your provided example makes no sense, since elements which match "div" can never match "span", and the exclusion is unnecessary. Provide a reasonable, meaningful example, with HTML included, and a compelling reason why jQuery is not a potential solution, and you will be more likely to find value here. — nbrooks, Dec 09 '13 at 09:02
Thanks everyone for your suggestion. I guess everyone has read the question as 'jquery not'. Actually I tried to mean 'jQuery not() function'. I hope the question so claimed as duplicate is clearly not duplicate now. — hsuk, Dec 09 '13 at 09:10
@nbrooks: I do have clear idea about jquery is a library of javascript. But, I can't load jquery for few reasons as it has got other javascript framework. That's why I am posting the question. Anyways, I have updated the question. — hsuk, Dec 09 '13 at 09:17
@Everyone: My example is not about my real scenario. Its just about how to replicate the use of 'not()' function of jQuery in pure javascript. — hsuk, Dec 09 '13 at 09:25

score 2 · Answer 1 · answered Dec 09 '13 at 09:22

2

Your given code won't have the intended effect, even if you were to use jQuery.

The not method in jQuery filters the set of matched elements to exclude those which match a condition. Example $(".animal").not(".dog") originally matches any animal, and then is filtered to exclude dogs. The effective jQuery object at the end of the filtering would still include other animals, but would no longer include dogs. This does not do any DOM tree searches, and does not consider descendants. The selector is applied to each element in the original matched set, and the element is excluded if it matches.

The correct way (jsFiddle), in your example, to highlight all the child <div>s except the news, is to select all the child <div> elements, then filter:

$('#outerdiv > div').not('.news').css('background-color', 'red');

To reproduce this in (non-framework-augmented) JS, try (jsfiddle):

var divs = document.querySelectorAll('#outerdiv > div:not(.news)');

for (var i=0; i < divs.length; i++) {
    divs[i].style.backgroundColor = 'red';
}

The :not() pseudo-element selector is a CSS 3 selector which filters matched elements. It is more limited than jQuery's .not() however, and it only allows certain selectors to be nested inside it. From the MDN docs:

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

answered Dec 09 '13 at 09:22

nbrooks

18,126
5
54
66

My example is not about my real scenario. Its just about how to replicate the use of 'not()' function of jQuery in pure javascript. – hsuk Dec 09 '13 at 09:25
An example is pointless if it doesn't mirror the real scenario and capture the essence of your problem. In any case, I provided a vanilla JS solution which captures the essence of what you were trying to do using jQuery. Does that solve your problem (jsfiddle link should help you experiment with it a bit)? – nbrooks Dec 09 '13 at 09:28
I am going to replace getElementsByTagName('table') with querySelectorAll('table:not(.non-draggable)'). Are these two methods return same array type ? – hsuk Dec 09 '13 at 09:39
@hsuk Yes type is same, but `getElementsByTagName` return Live Node list and querySelectorAll non-Live. – Givi Dec 09 '13 at 09:55
@Givi : What's the difference in between live and static nodes ? Does it make any impact ? – hsuk Dec 09 '13 at 10:00
Look at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) and [querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript](http://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid) – Givi Dec 09 '13 at 10:07
@Givi : I didn't see any difference between live and static nodes over there. Whats the literal meaning of those two terms. – hsuk Dec 09 '13 at 10:09
@hsuk If you're asking whether they're interchangeable, it depends how you're using them. That snippet you provided in your comment seems perfectly reasonable to substitute. Both functions return a "NodeList" of HTML elements. The best way to see if that's compatible with the rest of your code? Try it. See if anything breaks. Good luck! :) – nbrooks Dec 09 '13 at 10:43

Givi · Answer 2 · 2013-12-09T10:25:36.867

1

If you want achieve same result with raw javascript you can try something like this:

[].forEach.call(document.querySelectorAll("#outerdiv div:not(.news)"), function (value, index, array) {
    value.style.backgroundColor = "red";
});

jsFiddle

Also look at:

1) Document.querySelectorAll MDN
2) The negation CSS pseudo-class :not(X)

Difference between live and non-live node list. Look at jsFiddle

edited Dec 09 '13 at 10:25

answered Dec 09 '13 at 09:12

Givi

1,674
2
20
35

score 1 · Answer 3 · answered Dec 09 '13 at 09:17

I think your example jquery might have an error, if I understood what you want ( This is probably what you meant to be your example ).

You could do something like this:

example link

Javascript:

    // Find the correct table...
var table = document.getElementById("mytable"),
    // Find all the td's inside it...
    td = table.getElementsByTagName("td");

// Loop through each td inside the table...
for ( var i=0; i < td.length; i++ ) {

    // If td has a class that is anything but .exclude...
    if ( td[i].className !== 'exclude' ) { 

        // Add class to all non-excluded elements
        td[i].className = "mark";

    }

}

Html:

<table id="mytable">
    <tr>
        <td>td-1</td>
        <td>td-2</td>
    </tr>
    <tr>
        <td class="exclude">td-3</td>
        <td>td-4</td>
    </tr>
    <tr>
        <td>td-5</td>
        <td>td-6</td>
    </tr>
</table>

Css:

.mark { color: red; }

score 0 · Answer 4 · answered Sep 08 '18 at 13:39

Maybe you are searching for shim?

Shim

This is a function which imitates native behavior.

Try my shim for jQuery.not():

function not($list, element) {
    const list = Array.from($list);
    const index = list.indexOf(element);
    return list.slice(index);
}

Demo

https://gist.github.com/piecioshka/5a9fa52f1c3f90aed97bfb8e0caa8335

How to use jQuery method 'not()' in pure JavaScript?

4 Answers4

Shim

Demo

Linked