Question

我试图抓住前两个具有“选定”类的td元素。并将文本颜色更改为绿色。我正在使用nextUntil，但我面临的问题是，当有一个新的<tr>时，它不会抓取那些td元素。有没有办法可以使用nextUntil忽略任何<tr>标签？感谢

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>

所以为了澄清我想要选择文本20到26的td元素，但只选择了21到24。有时，在选择了类的td标签之间只有一组<tr>标签。

Answer 1

我的理解是突出显示每个TD，而不管两个选定类之间的行。

使用类更改而不是内联CSS，因为使用一行代码更容易删除后续选择。

DEMO：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');

Answer 2

不是真的;这就是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;标记替换您的表格单元格。然后他们都会是兄弟姐妹。但是，this isn't supported in older browsers。

Answer 3

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

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

FIDDLE

jQuery nextUntil（）在结束标记时停止

3 个答案: