Переключать только определенные элементы на основе класса - PullRequest
Новая
       7

Переключать только определенные элементы на основе класса

0 голосов
/ 15 февраля 2019

У меня есть простая таблица: 

<table>
    <tr class="header">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
</table>

Это прекрасно работает для переключения всего с одного «заголовка» на следующий. 

$('.header').click(function () {
    $(this).nextUntil('tr.header').toggle();
});

Но что я не могу понятькак это сделать, это ТОЛЬКО переключать элементы с классом "level2" и оставлять "level3" скрытым.

Я уже давно играюсь с .toggleClass () и .netAll (), но яне понимаю.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Вы можете заполнить filter параметр nextUntil, чтобы выбрать только те элементы, которые вам нужны, в этом случае: 

$(this).nextUntil('tr.header', '.level2').toggle();
//                             ^^^^^^^^^

Пример: 

$('.header').click(function () {
    $(this).nextUntil('tr.header', '.level2').toggle();
});
.header {
  background-color: green;
}

.level2 {
  background-color: yellow;
}

.level3 {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr class="header">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
</table>
0 голосов
/ 15 февраля 2019

Используйте фильтр для выбора элементов 

$('.header').click(function () {
    var trs = $(this).nextUntil('tr.header')
    trs.filter('.level2').toggle();
    trs.filter('.level3').hide();
});
.header {
  background-color: green;
}

.level2 {
  background-color: yellow;
}

.level3 {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr class="header">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level2">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
    <tr class="level3">
        <th>
            ....
        </th>
    </tr>
</table>
...