我有一个日历，所有的表都包含在class =“tablecolor”中我想在相应月份的每个月的前一个/下一个旁边。这是我的html代码片段：
<a href="#" class="previousMonth">« Previous Month</a>
<h2 id="oct2014">October 2014</h2>
<a href="#" class="nextMonth">Next Month »</a>
<div class="tablecolor" style="width:100%;">
<table summary="2014 Grants Calendar" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th scope="col">Sunday</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div>1</div>
<p> </p>
<p> </p></td>
<td><div>2</div>
<p> </p>
<p> </p></td>
<td><div>3</div>
<p> </p>
<p> </p></td>
<td><div>4</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>5</div>
<p> </p>
<p> </p></td>
<td><div>6</div>
<p> </p>
<p> </p></td>
<td><div>7</div>
<p> </p>
<p> </p></td>
<td><div>8</div>
<p> </p>
<p> </p></td>
<td><div>9</div>
<p> </p>
<p> </p></td>
<td><div>10</div>
<p> </p>
<p> </p></td>
<td><div>11</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>12</div>
<p> </p>
<p> </p></td>
<td><div>13</div>
<p> </p>
<p> </p></td>
<td><div>14</div>
<p> </p>
<p> </p></td>
<td><div>15</div>
<p> </p>
<p> </p></td>
<td><div>16</div>
<p> </p>
<p> </p></td>
<td><div>17</div>
<p> </p>
<p> </p></td>
<td><div>18</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>19</div>
<p> </p>
<p> </p></td>
<td><div>20</div>
<p> </p>
<p> </p></td>
<td><div>21</div>
<p> </p>
<p> </p></td>
<td><div>22</div>
<p> </p>
<p> </p></td>
<td><div>23</div>
<p> </p>
<p> </p></td>
<td><div>24</div>
<p> </p>
<p> </p></td>
<td><div>25</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>26</div>
<p> </p>
<p> </p></td>
<td><div>27</div>
<p> </p>
<p> </p></td>
<td><div>28</div>
<p> </p>
<p> </p></td>
<td><div>29</div>
<p> </p>
<p> </p></td>
<td><div>30</div>
<p> </p>
<p> </p></td>
<td><div>31</div>
<p> </p>
<p> </p></td>
<td> </td>
</tr>
</table>
</div>
<a href="#" class="previousMonth">« Previous Month</a>
<h2 id="nov2014">November 2014</h2>
<a href="#" class="nextMonth">Next Month »</a>
<div class="tablecolor" style="width:100%;">
<table summary="2014 Grants Calendar" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th scope="col">Sunday</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><div>1</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>2</div>
<p> </p>
<p> </p></td>
<td><div>3</div>
<p> </p>
<p> </p></td>
<td><div>4</div>
<p> </p>
<p> </p></td>
<td><div>5</div>
<p> </p>
<p> </p></td>
<td><div>6</div>
<p> </p>
<p> </p></td>
<td><div>7</div>
<p> </p>
<p> </p></td>
<td><div>8</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>9</div>
<p> </p>
<p> </p></td>
<td><div>10</div>
<p> </p>
<p> </p></td>
<td><div>11</div>
<p> </p>
<p> </p></td>
<td><div>12</div>
<p> </p>
<p> </p></td>
<td><div>13</div>
<p> </p>
<p> </p></td>
<td><div>14</div>
<p> </p>
<p> </p></td>
<td><div>15</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>16</div>
<p> </p>
<p> </p></td>
<td><div>17</div>
<p> </p>
<p> </p></td>
<td><div>18</div>
<p> </p>
<p> </p></td>
<td><div>19</div>
<p> </p>
<p> </p></td>
<td><div>20</div>
<p> </p>
<p> </p></td>
<td><div>21</div>
<p> </p>
<p> </p></td>
<td><div>22</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>23</div>
<p> </p>
<p> </p></td>
<td><div>24</div>
<p> </p>
<p> </p></td>
<td><div>25</div>
<p> </p>
<p> </p></td>
<td><div>26</div>
<p> </p>
<p> </p></td>
<td><div>27</div>
<p> </p>
<p> </p></td>
<td><div>28</div>
<p> </p>
<p> </p></td>
<td><div>29</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>30</div>
<p> </p>
<p> </p></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<a href="#" class="previousMonth">« Back a Month</a>
<h2 id="dec2014">December 2014</h2>
<div class="tablecolor" style="width:100%;">
<table summary="2014 Grants Calendar" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th scope="col">Sunday</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
</thead>
<tr>
<td> </td>
<td><div>1</div>
<p> </p>
<p> </p></td>
<td><div>2</div>
<p> </p>
<p> </p></td>
<td><div>3</div>
<p> </p>
<p> </p></td>
<td><div>4</div>
<p> </p>
<p> </p></td>
<td><div>5</div>
<p> </p>
<p> </p></td>
<td><div>6</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>7</div>
<p> </p>
<p> </p></td>
<td><div>8</div>
<p> </p>
<p> </p></td>
<td><div>9</div>
<p> </p>
<p> </p></td>
<td><div>10</div>
<p> </p>
<p> </p></td>
<td><div>11</div>
<p> </p>
<p> </p></td>
<td><div>12</div>
<p> </p>
<p> </p></td>
<td><div>13</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>14</div>
<p> </p>
<p> </p></td>
<td><div>15</div>
<p> </p>
<p> </p></td>
<td><div>16</div>
<p> </p>
<p> </p></td>
<td><div>17</div>
<p> </p>
<p> </p></td>
<td><div>18</div>
<p> </p>
<p> </p></td>
<td><div>19</div>
<p> </p>
<p> </p></td>
<td><div>20</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>21</div>
<p> </p>
<p> </p></td>
<td><div>22</div>
<p> </p>
<p> </p></td>
<td><div>23</div>
<p> </p>
<p> </p></td>
<td><div>24</div>
<p> </p>
<p> </p></td>
<td><div>25</div>
<p> </p>
<p> </p></td>
<td><div>26</div>
<p> </p>
<p> </p></td>
<td><div>27</div>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><div>28</div>
<p> </p>
<p> </p></td>
<td><div>29</div>
<p> </p>
<p> </p></td>
<td><div>30</div>
<p> </p>
<p> </p></td>
<td><div>31</div>
<p> </p>
<p> </p></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
我一直在尝试使用jQuery中的next（）和prev（）选择器，但是我没想到会得到结果。
$(".nextMonth").click(function (e) {
e.preventDefault();
var nextselector = $('div.tablecolor').next();
$(window).scrollTop(nextselector.position().top);
});
$(".previousMonth").click(function (e) {
e.preventDefault();
var prevselector = $('div.tablecolor').prev();
$(window).scrollTop(prevselector.position().top);
});
当我点击2014年10月的Next时，我得到了2014年11月，但是当我点击2014年11月的下一个时，我什么都没得到。我在哪里错过了.next（）问题？
由于
答案 0 :(得分：1)
使用$('div.tablecolor')将始终从页面上的第一个开始。所以使用.next()总会给你第二个月。尝试使用$(this).next()和.prev()从点击的链接中引用。
修改
我只是在jsFiddle中尝试了这个，而且它并不像你想要的那样工作。它应该足以让你朝着正确的方向前进。也许每月在另一个div中包装并使用$(this).parent().next()
工作fiddle。 <= p>包含每个月，链接和所有，在div中，以及父（）引用。
答案 1 :(得分：0)
var count=0;
$(".nextMonth").click(function (e) {
e.preventDefault();
count++;
var nextselector = $('div.tablecolor').eq(count);
$(window).scrollTop(nextselector.position().top);
});
$(".previousMonth").click(function (e) {
e.preventDefault();
count--;
if(count){
var prevselector = $('div.tablecolor').eq(count);
$(window).scrollTop(prevselector.position().top);
}
});
答案 2 :(得分：0)
$（＆＃39; div.tablecolor＆＃39;）正在您的页面中选择此第一个实例，因此它将始终滚动到第二个$（＆＃39; div.tablecolor＆＃39;）in你的页面。