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.

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.

• javascript
• jquery

Share Improve this question Follow edited Dec 9, 2013 at 9:06 hsuk asked Dec 9, 2013 at 7:06 hsukhsuk 6,8701313 gold badges5252 silver badges8181 bronze badges 11

• 1 Duplicate of stackoverflow./questions/11809770/… ? – Bas van Dijk Commented Dec 9, 2013 at 7:08
• 1 can you share the html sample – Arun P Johny Commented Dec 9, 2013 at 7:20
• @dholakiyaankit : I don't think you have read my question properly since the link you have mentioned is not similar at all. – hsuk Commented Dec 9, 2013 at 8:20
• 1 (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 Commented Dec 9, 2013 at 8:51
• 3 @Jurik : Bro, how can it be duplicate, I want to know the use of it in javascript ... – hsuk Commented Dec 9, 2013 at 8:53

 |  Show 6 more ments

4 Answers 4

Sorted by: Reset to default 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.

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; }

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

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./piecioshka/5a9fa52f1c3f90aed97bfb8e0caa8335