Between Custom Selectors

Custom Selectors for Between , Between And Equals , Not Between , Not Between And Equals

by Thulasi Ram.S

HTML

<h1>Between ( $("#test1 td:bt(3,5)").css("color", "red"); )</h1>
<table id="test1" border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>

<h1>Between And Equals ( $("#test2 td:bte(3,5)").css("color", "red"); )</h1>
  <table id="test2" border="1">
  <tr><td>qTD #0</td><td>qTD #1</td><td>qTD #2</td></tr>
  <tr><td>qTD #3</td><td>qTD #4</td><td>qTD #5</td></tr>
  <tr><td>qTD #6</td><td>qTD #7</td><td>qTD #8</td></tr>
</table>

<h1>Not Between ( $("#test3 td:nbt(3,5)").css("color", "red"); )</h1>
 <table id="test3" border="1">
  <tr><td>wTD #0</td><td>wTD #1</td><td>wTD #2</td></tr>
  <tr><td>wTD #3</td><td>wTD #4</td><td>wTD #5</td></tr>
  <tr><td>wTD #6</td><td>wTD #7</td><td>wTD #8</td></tr>
</table>

<h1> Not Between And Equals ( $("#test4 td:nbte(3,5)").css("color", "red"); )</h1>
 <table id="test4" border="1">
  <tr><td>rTD #0</td><td>rTD #1</td><td>rTD #2</td></tr>
  <tr><td>rTD #3</td><td>rTD #4</td><td>rTD #5</td></tr>
  <tr><td>rTD #6</td><td>rTD #7</td><td>rTD #8</td></tr>
</table>
</table>

CSS

table
{
 margin:25px 0px;   
}
h1
{
font-weight:bolder;
 font-size:18px;   
}

JavaScript

(function ($) {
    $.extend($.expr[':'], {
        bt: function (elem, i, match) {
            return ((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
        },

        nbt: function (elem, i, match) {
            return !((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
        },

        bte: function (elem, i, match) {
            return ((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
        },

        nbte: function (elem, i, match) {
            return !((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
        }
    });
})(jQuery);

$(document).ready(function(){
    $("#test1 td:bt(3,5)").css("color", "red");      
    
    $("#test2 td:bte(3,5)").css("color", "red");
   
    $("#test3 td:nbt(3,5)").css("color", "red");    

    $("#test4 td:nbte(3,5)").css("color", "red");
});