1

I am trying to grab all the td elements between the first two that have the class 'selected'. and change the text color to green. I am using nextUntil but the problem I am facing is that when there is a new <tr> it doesn't grab those td elements. Is there a way to ignore any <tr> tags using nextUntil? Thanks

jQuery:

var firstDate = $('table.jCalendar tbody').find($('td.selected')[0]);
var secondDate = $('table.jCalendar tbody').find($('td.selected')[1]);
$(firstDate).nextUntil(secondDate).css("color", "green");

HTML:

<table cellspacing="2" class="jCalendar"><tbody>
<tr>
   <td class="current-month weekday today unselectable">18</td>
   <td class="current-month weekday unselectable">19</td>
   <td class="current-month weekday selected">20</td>
   <td class="current-month weekday unselectable" style="color: green; ">21</td>
   <td class="current-month weekday unselectable" style="color: green; ">22</td>
   <td class="current-month weekend unselectable" style="color: green; ">23</td>
   <td class="current-month weekend unselectable" style="color: green; ">24</td>
</tr>
<tr>
   <td class="current-month weekday today unselectable">25</td>
   <td class="current-month weekday unselectable">26</td>
   <td class="current-month weekday selected">27</td>
   <td class="current-month weekday unselectable">28</td>
   <td class="current-month weekday unselectable">29</td>
   <td class="current-month weekend unselectable">30</td>
   <td class="current-month weekend unselectable">31</td>
</tr>
</tbody></table>

so to clarify i want the td elements with the texts 20 through 26 selected but 21 through 24 is only being selected. Sometimes there are more then just one set of <tr> tags between the td tags with the class selected.

4

3 回答 3

3

我的理解是突出显示每个 TD，无论所选的 2 个班级之间的行如何。

我正在使用类更改而不是内联 CSS，因为使用一行代码在后续选择中删除它要容易得多。

演示：http: //jsfiddle.net/5txeq/

var firstRow = $('td.selected:first').parent()
var secondRow = $('td.selected:last').parent();

$('tr').slice(firstRow.index() + 1, secondRow.index()).find('td').addClass('green')

firstRow.find('.selected').nextAll().andSelf().addClass('green')
secondRow.find('.selected').prevAll().andSelf().addClass('green')

替代较短的版本：演示：http: //jsfiddle.net/5txeq/2/

var $cells = $('tbody td'),
    idx_1 = $cells.index($('td.selected:first')),
    idx_2 = $cells.index($('td.selected:last'));

$cells.slice(idx_1, idx_2 + 1).addClass('green');
于 2012-06-18T18:23:37.687 回答
0

在此方法中，您选择所有单元格并过滤掉选择前后的单元格

var selectStart = false;
$('table.jCalendar td').not(function() {
    if ($(this).hasClass('selected')) {
        selectStart = !selectStart;
    }
    return !selectStart;
}).css({color:'green'});​

小提琴

于 2012-06-18T18:40:01.120 回答
0

并不真地; 这nextUntil就是设计的方式。您需要创建一个按顺序each遍历所有<td>标签的循环：

var color_it = false;
$('table.jCalendar tbody').find('td').each(function() {
    var $this = $(this);
    if $this.is(firstDate) {
        color_it = true;
    };
    if $this.is(secondDate) {
        color_it = false;
    };
    if (color_it) {
        $this.css("color", "green");
    };
});

对于它的价值，您还可以将表格单元格替换为附加样式的<div>标签。display: table-cell;那么他们都将是兄弟姐妹。但是，旧浏览器不支持此功能。

于 2012-06-18T18:13:40.850 回答