Make Javascript function ignores the last li to submit form

Question

I have the following html code:

<div class="ranges">
<ul>
<li>Op 1</li>
<li>Op 2</li>
<li>Op 3</li>
<li>Op 4</li>
<li>Op 5</li>
<li>Op 6</li>
<li>Op 7</li>
</ul>

I need to submit a form on the click of op 1, op 2, op 3, op 4, op 5, op 6. In other word, the last li, cant submit the form. `In this the code Im trying to make this happen:

  gData.on('click', '.ranges ul li', function(e){
    gFilter.find('form').submit();
  });

But this .ranges ul li, will get all the li. How Can I make it ignore the last one?

Answer 1

You can use combination of :not() and :last

gData.on('click', '.ranges ul li:not(:last)', function(e){
   gFilter.find('form').submit();
});

$('body').on('click', '.ranges ul li:not(:last)', function(e){
    alert('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ranges">
  <ul>
    <li>Op 1</li>
    <li>Op 2</li>
    <li>Op 3</li>
    <li>Op 4</li>
    <li>Op 5</li>
    <li>Op 6</li>
    <li>Op 7</li>
  </ul>

Answer 2

This should work:

  gData.on('click', '.ranges ul li:not(:last-child)', function(e){
    gFilter.find('form').submit();
  });

Answer 3

You can use the :not(:last)function in jQuery.

gData.on('click', '.ranges ul li:not(:last)', function(e){
gFilter.find('form').submit();
});