1

Какая задача: сначала при помощи скрипта предоставленного ниже необходимо достать класс родительского элемента.

   <script type="text/javascript">
       
var parents = document.querySelectorAll('.card-item');
for (var i = 0, parent; parent = parents[i]; i++)
    parent.onclick = function(e) {
              if (e.target.className == 'btn popup-call')  { 
                  alert(this.className); 
                  var thunder = this.className;
                };

}
       </script>

Затем после этого необходимо спуститься к чилдам у этого родительского элемента и достать из него значения.

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

<div class="card">
        <div class="container">
            <h2>По вашему запросу подобраны следующие программы</h2>
        </div>
        <div class="card-slider">
            <div>
                <div class="card-wrapper-over">
                    <div class="container">
                        <div class="card-wrapper">
                            <div class="card-wrapper-inner" id="card-wrapper-first">
                            <?php query_posts_pfg(); ?>
                            <?php  /*$query = new WP_Query( 'post_type=program-card' );*/ ?>
                            <?php if ( have_posts() ) : ?>
                                <?php while ( have_posts()): the_post(); ?>
                                <div class="card-item level-<?php $term_list = wp_get_post_terms( $post->ID, 'level', array( 'fields' => 'ids' ) );
                                echo reset( $term_list ); ?> direction-<?php $term_list = wp_get_post_terms( $post->ID, 'direction', array( 'fields' => 'ids' ) );
                                echo reset( $term_list ); ?> university-<?php $term_list = wp_get_post_terms( $post->ID, 'university', array( 'fields' => 'ids' ) );
                                echo reset( $term_list ); ?> program-<?php $term_list = wp_get_post_terms( $post->ID, 'program', array( 'fields' => 'ids' ) );
                                echo reset( $term_list ); ?> language-<?php $term_list = wp_get_post_terms( $post->ID, 'language', array( 'fields' => 'ids' ) );
                                echo reset( $term_list ); ?>">
                                    <div class="card-item_top">
                                        <img src="<?php the_field('card_logo-link'); ?>" alt="logo">
                                        <p class="test"><?php the_field('card_title-rus'); ?></p>
                                        <h2><?php the_field('card_name-rus'); ?></h2>
                                        <h3>Основная программа <a href="<?php the_field('card_link'); ?>">О программе</a></h3>
                                    </div>
                                    <div class="card-item_middle">
                                        <ul>
                                            <li>
                                                <p>Уровень обучения</p>
                                                <h3><?php the_field('card_level-rus'); ?></h3>
                                            </li>
                                            <li>
                                                <p>Форма обучения</p>
                                                <h3><?php the_field('card_form-rus'); ?></h3>
                                            </li>
                                            <li>
                                                <p>Код программы </p>
                                                <h3><?php the_field('card_code'); ?></h3>
                                            </li>
                                            <li>
                                                <p>Продолжительность</p>
                                                <h3><?php the_field('card_during-rus'); ?></h3>
                                            </li>
                                            <li>
                                                <p>Степень или квалификация</p>
                                                <h3><?php the_field('card_level-rus'); ?></h3>
                                            </li>
                                            <li>
                                                <p>Язык обучения</p>
                                                <h3><?php the_field('card_language-rus'); ?></h3>
                                            </li>
                                        </ul>
                                        <p>Куратор</p>
                                        <h3><?php the_field('card_curator'); ?></h3>
                                        <div class="contact">
                                            <p><?php the_field('card_phone'); ?></p>
                                            <a href="mailto:<?php the_field('card_email'); ?>"><?php the_field('card_email'); ?></a>
                                        </div>
                                    </div>
                                    <div class="card-item_bottom">
                                        <div class="card-item_bottom-info">
                                            <h2><?php the_field('card_price'); ?>₽</h2>
                                            <p>за год обучения</p>
                                        </div>
                                        <a class="btn popup-call" href="#" onclick="checktest()">Поступить</a>
                                    </div>
                                </div>
                                <?php endwhile; ?>
                                <?php endif; ?>
                                <?php /*wp_reset_postdata();*/ ?>
                                <div class="card-no-result">
                                    <h2>Нет подходящей программы?</h2>
                                    <p>Напишите нам об этом и мы придумаем для вас индивидуальное решение.</p>
                                    <a class="btn popup-call" href="#modal">Получить решение</a>
                                </div> <!-- card-item -->
                                <div>
                                    <li>Университет <div id="name"> </div></li>
                                </div>
                            </div> <!-- card-wrapper-inner -->
                        </div>
                    </div>
                </div>
            </div> <!-- slide -->
        </div>
  </div>
0

1 ответ 1

2

Сделал более-менее похожий пример на Ваш. Т.к. у Вас уже есть родитель, мы можем использовать querySelector('.childClass'), чтобы найти у родителя все дочерние елементы с нужным классом.

const parents = document.querySelectorAll('.card-item');

for (let i = 0, parent; parent = parents[i]; i++) {
  parent.onclick = function(e) {
    const children = this.children;
    if (e.target.className === 'btn') {
      console.log(this.querySelector('.test').innerText);
    }
  };
}
<div class="card-item">
  <div class="child">
    <p class="nested-child">Что-то другое 1</p>
    <p class="test">Нужный текст 1</p>
    <button class="btn">Найти значение</button>
  </div>
</div>

<hr>

<div class="card-item">
  <div class="child">
    <p class="nested-child">Что-то другое 2</p>
    <p class="test">Нужный текст 2</p>
    <button class="btn">Найти значение</button>
  </div>
</div>

2
  • @ethithat, прости, что лишний раз тереблю и задаю тупые вопросы) Подскажи, а какой командой можно забрать именно текст без <p></p> , как ты указал в примере? 20 авг 2020 в 13:15
  • 1
    @АлинаСотская, .innerHTML lubo .innerText
    – entithat
    20 авг 2020 в 17:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.