Как при клике взять ID родителя и скрыть дивы с классом взятого ранее родителя?

Question

[Сергей Dydaevskiy]

Здравствуйте друзья, столкнулся с задачкой для решения которой у меня не хватает опыта JS программировании.
Имеется сайт с системой тестирования, все тесты отображаются в личном кабинете пользователя в виде списка, когда пользователь выбирает тест для прохождения он нажимает кнопку «Начать тестирование» после чего открывается тест и собственно начинается сам процесс тестирования. Но все тесты которые находятся в данном списке остаются, то есть не скрываются. Как заставить с помощью JS скрыть все тесты кроме того который проходит пользователь?
Чего необходимо добиться:
При не активном тесте, то есть отображается только список тестов имеются DIVы с классом activtest, при нажатии пользователем кнопки с классом wpProQuiz скрипту необходимо сделать следующее:
1)Найти ID прародительского DIVа того элемента по которому был произведен щелчок (в данном случае id=wpProQuiz_6).
2) Занести ID в переменную
3) Скрыть все DIVы с классом activtest ID которых не совпадает с ранее (пункт 2) найденным DIVом.

<div id="rcl-tabs">
    <div id="available">
            <!-- ТЕСТ 1 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>А вы пунктуальный человек?  </b></h3>
                <div class="wpProQuiz_content" id="wpProQuiz_1">
                    <!-- Содержимое теста -->
                </div>
            </div>
            <!-- ТЕСТ 2 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>
                <div class="wpProQuiz_content" id="wpProQuiz_2">
                    <!-- Содержимое теста -->
                </div>
            </div>
            <!-- ТЕСТ 3 -->
            <!-- СОДЕРЖИМОЕ БЛОКА ПОЛНОСТЬЮ -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>        <div class="wpProQuiz_content" id="wpProQuiz_2">
                <div style="display: none;" class="wpProQuiz_time_limit">
                    <div class="time">Лимит времени: <span>0</span></div>
                    <div class="wpProQuiz_progress"></div>
                </div>
                <div class="wpProQuiz_checkPage" style="display: none;">
                    <h4 class="wpProQuiz_header">Навигация (только номера заданий)</h4>

                    <p><span>0</span> из 1 заданий окончено</p>
                    <p>Вопросы:</p>
                    <div style="margin-bottom: 20px;" class="wpProQuiz_box">
                        <ol>
                            <li>1</li>
                        </ol>
                        <div style="clear: both;"></div>
                    </div>
                    <input type="button" name="endQuizSummary" value="Завершить тест" class="wpProQuiz_button">
                </div>
                <div class="wpProQuiz_infopage" style="display: none;">
                    <h4>Информация</h4>
                    <input type="button" name="endInfopage" value="Завершить тест" class="wpProQuiz_button">
                </div>
                <div class="wpProQuiz_text">
                    <p>Новый тест</p>
                    <div>
                        <!-- onClick="show();" -->
                        <!-- На данную кнопку необходимо повесить обработчик --><input onclick="show();" class="wpProQuiz_button" type="button" value="Начать тест" name="startQuiz">
                        <div>
                            <!-- Другое содержимое теста -->
                        </div>
                    </div>

                </div>


                <!-- Содержимое данного блока (id="done") тоже необходимо скрыть -->
                <div id="done">
                </div>
                <div id="lk-content" class="rcl-content"><div id="tab-agroportal_test_system" class="agroportal_test_system_block recall_content_block active"><div id="subtab-agroportal_test_system" class="rcl-subtab-content">1</div></div></div>
            </div>
    </div>
</div>

Comments

[Сергей Dydaevskiy]

Но вообще такая суть:
$idName = $('Опаздываю на работу, может не верно.
но вообще такая суть:
$idName = $('#wpProQuiz_6');
$idName.click(function() {
if ( $idName != $('.activetest') ) {
$('.activetest').hide();
}
})

Может не сработать и скрыть один, если так, то $.each (погуглите)');
$idName.click(function() {
if ( $idName != $('.activetest') ) {
$('.activetest').hide();
}
})

Может не сработать и скрыть один, если так, то $.each (погуглите)

Спасибо за ответ. При клике не чего не срабатывает + #wpProQuiz_6 это для примера в реальности данный ID будет всегда разным, так как пользователь будет кликать на разные тесты.

Answer 1

[xmoonlight]

this.parentNode

Comments

[Сергей Dydaevskiy]

Спасибо за столь быстрый ответ, очень прошу дать примитив скрипта.

[xmoonlight]

Сергей Dydaevskiy: Impossible.

Answer 2

[akzhan]

var wanted = $('input.wpProQuiz_button').closest('div.activtest').show();
$('div.activtest').not(wanted).hide();

Comments

[Сергей Dydaevskiy]

Спасибо. Прошу меня простить найти нужно ПраПраРодителя (я окончательно запутался).
Вот выложил полный блок с тестами:
https://codepen.io/dydaevskiy/pen/XNgNQN

Пробовал вот так (по совету форумчанина Balanaar'a которому я безгранично благодарен):
$('.wpProQuiz_button').on('click', function() {
var id = $(this).parents('.wpProQuiz_content').attr('id');
$('.activtest').each(function() {
if ($(this).find('.wpProQuiz_content').attr('id') != id) $(this).hide();
});
});

Но что-то яне так, скрипт не срабатывает.

[akzhan]

https://codepen.io/anon/pen/YpQNqO?editors=1111

[Сергей Dydaevskiy]

akzhan: Спасибо, но тест на котором была нажата кнопка "Начать тест" должен остаться

[Сергей Dydaevskiy]

Разобрался:
$('.wpProQuiz_button').on('click', function() {
var id = $(this).parents('.wpProQuiz_content').attr('id');
$('.activtest').each(function() {
if ($(this).find('.wpProQuiz_content').attr('id') != id) $(this).hide();
});
});

Теперь только осталось разобраться почему на сайте не работает. Спасибо всем ответившим огромное.

[akzhan]

Сергей Dydaevskiy: jquery подключен? и да, лучше использовать closest вместо parents, думаю

[Сергей Dydaevskiy]

Да подключен, но печему не работает не пойму. Сейчас разбираюсь.