CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
sqlchild
sqlchild

Reputation: 9064

jquery selector to select all text inputs not of a specified class

In the following jquery code, I need to skip some input boxes whose classname not equals to item

input[type=text][class!=item] , this doesn't works

. How to add this exception ? 

     $(document)  
                    .on('focus', 'input[type=text]")', function() { 
                        $('.footer').css('position', 'absolute');
                        $('.footer').css('bottom', ''); 
                    })

                    .on('blur', 'input[type=text]', function() { 
                        $('.footer').css('position', 'fixed');  
                        $('.footer').css('bottom', '0');
                    });

Upvotes: 0

Views: 1477

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

You want to use the :not() selector in your query:

See snippet for results:

// 2 solutions here
// Using the class attribute $("input[type=text]:not([class=item])")
console.log($("input[type=text]:not([class=item])").length, "element matched.");

// Using the class selector $("input[type=text]:not('.item')")
console.log($("input[type=text]:not('.item')").length, "element matched.");


// Using the code from your question:
$("input[type=text]:not('.item')").on('focus', function() {
  $('.footer').css('position', 'absolute');
  $('.footer').css('bottom', '');
})

$("input[type=text]:not('.item')").on('blur', function() {
  $('.footer').css('position', 'fixed');
  $('.footer').css('bottom', '0');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item">
<input type="text" class="item">
<input type="text">

I've added your code in my snippet, but I don't know what you want to do with your .footer element.

Hope it helps.

Upvotes: 1

K K
K K

Reputation: 18099

Try

$("input[type='text']:not('.classname')");

So, adding and modifying your code:

$(document)
  .on('focus', "input[type='text']:not('.classname')", function() {
    $('.footer').css({
      'position': 'absolute',
      'bottom': 'auto'
    });
  })

  .on('blur', "input[type='text']:not('.classname')", function() {
    $('.footer').css({
      'position': 'fixed',
      'bottom': 0
    });
  });

Upvotes: 4

Related Questions