1

クラス'が選択されている'最初の2つの間のすべてのtd要素を取得しようとしています。テキストの色を緑に変更します。nextUntilを使用していますが、私が直面している問題は、新しい<tr>ものがある場合、それらのtd要素を取得しないことです。<tr>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が選択されているtd要素が必要ですが、21〜24のみが選択されています。<tr>クラスが選択されたtdタグの間に、タグのセットが1つ以上ある場合があります。

4

3 に答える 3

3

私の理解では、選択した2つのクラス間の行に関係なく、すべてのTDを強調表示します。

インラインCSSの代わりにクラス変更を使用しています。これは、1行のコードで後続の選択で削除する方がはるかに簡単だからです。

デモ：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

あまり; それが設計された方法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 に答える
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 に答える