两个选择器之间的jquery长度

Question

我想在两个选择器<td>和.bg-primary之间获得booked:first-child长度，我该怎么做？

我正在尝试以下代码，但它不起作用:(我希望结果为：＆＃34; num：5＆＃34;）

＆＃13;

＆＃13;

var term3 = document.getElementsByClassName( "booked" );
var vrtid = $( ".bg-primary" ).nextUntil( term3, "td" ).length;
alert('num:'+vrtid);

＆＃13;

.booked {
    color: rgb(255, 250, 81) !important;
    background-color: #009975 !important;
}
.bg-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以减去索引：

＆＃13;

＆＃13;

var vrtid = $('.booked:first').index('td') - $('.bg-primary').index('td');
alert('num:'+vrtid);

＆＃13;

.booked {
    color: rgb(255, 250, 81) !important;
    background-color: #009975 !important;
}
.bg-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;