CODEWITHSUNDEEP
javascriptjquerycss
Me hdi
Me hdi

Reputation: 1912

jquery length between two selector

I want get length <td> between two selector .bg-primary and booked:first-child, what do i do?

I am trying as following code but it doesn't work: (i want result as:"num:5")

var term3 = document.getElementsByClassName( "booked" );
var vrtid = $( ".bg-primary" ).nextUntil( term3, "td" ).length;
alert('num:'+vrtid);
.booked {
    color: rgb(255, 250, 81) !important;
    background-color: #009975 !important;
}
.bg-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td data-name="disabled-day">29</td>
            <td data-name="disabled-day">30</td>
            <td data-name="disabled-day">01</td>
            <td data-name="disabled-day">02</td>
            <td data-name="disabled-day">03</td>
            <td data-name="disabled-day">04</td>
            <td data-name="disabled-day" class="text-danger">05</td>
        </tr>
        <tr>
            <td data-name="disabled-day">06</td>
            <td data-name="disabled-day">07</td>
            <td data-name="disabled-day">08</td>
            <td data-name="disabled-day">09</td>
            <td data-name="disabled-day">10</td>
            <td data-name="disabled-day">11</td>
            <td data-name="disabled-day" class="text-danger">12</td>
        </tr>
        <tr>
            <td data-name="disabled-day">13</td>
            <td data-name="disabled-day">14</td>
            <td data-name="disabled-day">15</td>
            <td data-name="disabled-day">16</td>
            <td data-name="disabled-day">17</td>
            <td data-name="disabled-day">18</td>
            <td data-name="disabled-day" class="text-danger">19</td>
        </tr>
        <tr>
            <td data-name="disabled-day">20</td>
            <td data-name="disabled-day">21</td>
            <td data-name="disabled-day">22</td>
            <td data-name="disabled-day">23</td>
            <td data-name="today" class="bg-primary">24</td>
            <td data-name="day">25</td>
            <td data-name="day" class="text-danger">26</td>
        </tr>
        <tr>
            <td data-name="day">27</td>
            <td data-name="day">28</td>
            <td data-name="disabled-day"  class="booked">29</td>
            <td data-name="disabled-day"  class="booked">30</td>
            <td data-name="disabled-day">01</td>
            <td data-name="disabled-day">02</td>
            <td data-name="disabled-day">03</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 112

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could subtract indices:

var vrtid = $('.booked:first').index('td') - $('.bg-primary').index('td');
alert('num:'+vrtid);
.booked {
    color: rgb(255, 250, 81) !important;
    background-color: #009975 !important;
}
.bg-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td data-name="disabled-day">29</td>
            <td data-name="disabled-day">30</td>
            <td data-name="disabled-day">01</td>
            <td data-name="disabled-day">02</td>
            <td data-name="disabled-day">03</td>
            <td data-name="disabled-day">04</td>
            <td data-name="disabled-day" class="text-danger">05</td>
        </tr>
        <tr>
            <td data-name="disabled-day">06</td>
            <td data-name="disabled-day">07</td>
            <td data-name="disabled-day">08</td>
            <td data-name="disabled-day">09</td>
            <td data-name="disabled-day">10</td>
            <td data-name="disabled-day">11</td>
            <td data-name="disabled-day" class="text-danger">12</td>
        </tr>
        <tr>
            <td data-name="disabled-day">13</td>
            <td data-name="disabled-day">14</td>
            <td data-name="disabled-day">15</td>
            <td data-name="disabled-day">16</td>
            <td data-name="disabled-day">17</td>
            <td data-name="disabled-day">18</td>
            <td data-name="disabled-day" class="text-danger">19</td>
        </tr>
        <tr>
            <td data-name="disabled-day">20</td>
            <td data-name="disabled-day">21</td>
            <td data-name="disabled-day">22</td>
            <td data-name="disabled-day">23</td>
            <td data-name="today" class="bg-primary">24</td>
            <td data-name="day">25</td>
            <td data-name="day" class="text-danger">26</td>
        </tr>
        <tr>
            <td data-name="day">27</td>
            <td data-name="day">28</td>
            <td data-name="disabled-day"  class="booked">29</td>
            <td data-name="disabled-day"  class="booked">30</td>
            <td data-name="disabled-day">01</td>
            <td data-name="disabled-day">02</td>
            <td data-name="disabled-day">03</td>
        </tr>
    </tbody>
</table>

Upvotes: 2

Related Questions