Using an array with jQuery's .not()

Question

What I'm trying to learn is how to use an array with .not() in jQuery. My code is below. Do you know why .item-ii is not being excluded from the selection? Thanks in advance!

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
    var temp = new Array();
    temp[0] = '.item-ii';
    console.log(temp);
    $('li').not(temp).css('background', 'red');
</script>

@pXL +1 to your comment. I must add that before using an array to define the items you want to exclude, you must know how to get an array item. — DaGLiMiOuX
– DaGLiMiOuX, Commented May 21, 2013 at 15:00

techfoobar · Accepted Answer · 2013-05-21 15:09:09Z

10

If you need to exclude all the selectors in the temp array, you can do:

$('li').not(temp.join(',')).css('background', 'red');

For example if temp = ['.item-ii', '.item-i'], the above will be equivalent to:

$('li').not('.item-ii,.item-i').css('background', 'red');

edited May 21, 2013 at 15:09

answered May 21, 2013 at 15:00

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2013-05-21 15:05:27Z

0

Because you need to specify the array element, not the entire array.

$('li').not(temp[0]).css('background', 'red');

jsFiddle example

Update:

To do this with multiple elements, try (note the removal of the period before the class name in your array):

 var temp = new Array();
 temp[0] = 'item-ii';
 $('li').not(function () {
     return ($.inArray($(this).attr('class'), temp) > -1);
 }).css('background', 'red');

jsFiddle example

edited May 21, 2013 at 15:05

answered May 21, 2013 at 15:00

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Tom Over a year ago

What if I had 4 elements in the array? How would I exclude the entire array without specifying each element individually?

pkaeding · Accepted Answer · 2015-01-24 00:26:26Z

To answer your question "Do you know why .item-ii is not being excluded from the selection?"

When you supply the array as the selector, jQuery uses $.grep()...

.not()

not: function( selector ) {
    return this.pushStack( winnow(this, selector, false), "not", selector);
},

winnow()

function winnow( elements, qualifier, keep ) {

    // Can't pass null or undefined to indexOf in Firefox 4
    // Set to 0 to skip string check
    qualifier = qualifier || 0;

    if ( jQuery.isFunction( qualifier ) ) {
        return jQuery.grep(elements, function( elem, i ) {
            var retVal = !!qualifier.call( elem, i, elem );
            return retVal === keep;
        });

    } else if ( qualifier.nodeType ) {
        return jQuery.grep(elements, function( elem ) {
            return ( elem === qualifier ) === keep;
        });

    } else if ( typeof qualifier === "string" ) {
        var filtered = jQuery.grep(elements, function( elem ) {
            return elem.nodeType === 1;
        });

        if ( isSimple.test( qualifier ) ) {
            return jQuery.filter(qualifier, filtered, !keep);
        } else {
            qualifier = jQuery.filter( qualifier, filtered );
        }
    }

    return jQuery.grep(elements, function( elem ) {
        return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
    });
}

...which compares the DOM node against your string - which has to fail of course :)

So you would have to add the DOM elements which should be excluded and not only their selector.

var temp = $(".item-ii").map(function() {
        return this;
    });

Example

So you should better use one of the other answers to get the effect you want :)

Collectives™ on Stack Overflow

Using an array with jQuery's .not()

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related