Как получить сразу следующие братья и сестры до следующего непревзойденного селектора

У меня есть следующая таблица

<table id="table">
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
</table>

при нажатии на видимую строку я хочу показать все следующие скрытые строки до следующей видимой строки. Количество скрытых строк не фиксировано. Как я могу выбрать сразу следующие строки до определенного элемента?


jquery xpath jquery-selectors dom-traversal
person Joyce Babu    schedule 09.10.2012    source источник
comment
сгруппируйте эти скрытые элементы в блок с помощью класса и выполните jQuery fadeIn() при нажатии на родительский видимый элемент.   -  person uday    schedule 09.10.2012

Ответы (4)


arrow_upward
2
arrow_downward 

//Add a class to your visible rows if possible to replace the next selector
$('tr:visible').click(function() {
    $('.hide').hide();
    $(this).nextUntil(':visible').fadeIn();
});​

Скрипка

.nextUntil() Справочник

Добавляя класс show к видимым строкам, вы можете добавить к нему простой эффект переключения:

$('.show').click(function() {
    $(this).nextUntil('.show').not('.show').fadeToggle();
});

Скрипка

Чуть более проработанная версия, которая переключает раздел нажатых строк и скрывает ранее открытые строки:

$('.show').click(function() {
    $('.hide').not(
        $(this).nextUntil('.show').not('.show').fadeToggle()
    ).hide();
});

Скрипка

person Fabrício Matté    schedule 09.10.2012
comment
Какая потребность в $(this).next()? - person Joyce Babu; 09.10.2012
comment
$(this).next() должен начать выбирать строки после щелчка - он выбирает первую скрытую строку и далее. Если вы просто отображаете их, а не переключаете, это не имеет большого значения. - person Fabrício Matté; 09.10.2012
comment
Но да, вызов andSelf делает .next() просто излишним, редактируя его. - person Fabrício Matté; 09.10.2012
comment
Спасибо. Я привел упрощенную таблицу выше. Фактическая таблица имеет класс для видимых строк. Я буду использовать это. - person Joyce Babu; 09.10.2012

arrow_upward
2
arrow_downward

Вы можете использовать .nextUntil(), заменив $('tr:first') вашим элементом -

$('tr:first').nextUntil('tr:not(.hide)').show()
// from first tr until next one that doesn't have class=hide

Хотя я бы, вероятно, использовал toggle(), чтобы скрыть/показать следующие элементы - я не уверен, какова ваша цель, поэтому вы можете делать то, что хотите, впоследствии

$('.hide').hide();
$('tr:not(.hide)').click(function(){   
    $(this).nextUntil('tr:not(.hide)').toggle();    
});

http://jsfiddle.net/nqTJc/

​

person wirey00    schedule 09.10.2012

arrow_upward
1
arrow_downward

Я думаю, это то, что вы ищете: jQuery .nextUntil()

person azeós    schedule 09.10.2012

arrow_upward
1
arrow_downward

использовать следующий до

$('tr').click(function(){

 $(this).nextUntil(':not("tr.hide")').show();

});​​

найти jsfiddle http://jsfiddle.net/K5QcA/

для справки http://api.jquery.com/nextUntil/

person YogeshWaran    schedule 09.10.2012