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

我试图抓住前两个类中的所有td元素。并将文本颜色更改为绿色。我使用nextUntil，但我面临的问题是，当有新的<tr>它不抓住这些td元素。有没有办法忽略使用nextUntil的任何<tr>标签？感谢jQuery nextUntil（）在结束标记处停止

的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选择，但21〜24的TD元素。有时，在选择的类别的td标签之间，只有一组<tr>标签。

来源

2012-06-18 Julio R.

'.nextUntil（'只检查'兄弟姐妹'。 '25,26'不是第一个'.selected'的兄弟姐妹。 –

它们是否总是按行连续排列，每个行中都有相同数量的td？ – jeschafe

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

正在使用类更改而不是内联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')

备用较短的版本： DEMO：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-18 18:23:37 charlietfl

那好吧...？ –

@SheikhHeera正在编辑自己，不知道你做了什么 – charlietfl

做得很好，做得很好。 –

不是真的;这就是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"); 
    }; 
});

对于它的价值，你也可以用具有附着display: table-cell;风格<div>标签取代你的表格单元格。然后他们都是兄弟姐妹。但是，this isn't supported in older browsers。

来源

2012-06-18 18:13:40 Blazemonger

在这种方法中，您选择的所有单元格，并前后选择

过滤掉那些

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

FIDDLE

来源

2012-06-18 18:40:01 Musa

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

回答

相关问题